jQuery的選擇2顯示OPTGROUP標籤

我使用jQuery插件Select2 jQuery的選擇2顯示OPTGROUP標籤

如果我有以下結構的多選：

<select name="search-term[]" multiple="multiple"> 
    <optgroup label="Categories"> 
    <option value="category_4">Internal</option> 
    <option value="category_2">Business</option> 
    <option value="category_5">External</option> 
    <option value="category_1">Science</option> 
    <option value="category_6">Sports and Social</option> 
    </optgroup> 
    <optgroup label="Event Types"> 
    <option value="eventtype_2">Meeting</option> 
    <option value="eventtype_3">Social Activity</option> 
    <option value="eventtype_4">Sporting Activity</option> 
    <option value="eventtype_1">Symposium</option> 
    </optgroup> 
    <optgroup label="Locations"> 
    <option value="location_2">Office 1</option> 
    <option value="location_3">Office 2</option> 
    <option value="location_1">Office 3</option> 
    </optgroup> 
</select>

如果我的OPTGROUP標記位置下選擇「辦公室1」那麼選定選項上的標籤上會顯示「辦公室1」

是否有方法可以更改此選項以顯示optgroup標籤，因此選擇選項上的標籤會顯示「位置：辦公室1」。

見標籤下面的圖片我指的是：

來源

2016-03-15 geoffs3310

我認爲這是你在找什麼：http://stackoverflow.com/questions/19037232/how-to-show-the-optgroup-value-期權價值爲-的選擇 – cralfaro

我使用templateSelection選項像這樣來分類，這到底：

$('select').select2({ 
    templateSelection: function(item) 
    { 
     value = item.id; 
     select_name = item.element.offsetParent.name; 

     optgroup_label = $('select[name="'+ select_name +'"] option[value="'+ value +'"]').parent('optgroup').prop('label'); 

     if(typeof optgroup_label != 'undefined') { 
      return optgroup_label+': ' + item.text; 
     } else { 
      return item.text; 
     } 
    } 
});

來源

2016-03-16 10:22:33 geoffs3310

我爲你做的jsfiddle，看到https://jsfiddle.net/vcwrjpny/

$('option').click(function() { 
    alert($(this).parent('optgroup').attr('label')); 
})

編輯：

與插件select2：

做這樣的：在這裏看到http://jsfiddle.net/bJxFR/68/

function format(item) { 
      opt = $('select').find(':selected'); 
      sel = opt.text(); 
      og = opt.closest('optgroup').attr('label'); 
      alert('your optgroup is : ' + og); 
      return item.text; 

    } 
    $("select").select2({ 
    formatSelection: format, 
    escapeMarkup: function(m) { return m; } 
    });

來源

2016-03-15 17:37:26 Greg

當我試圖使用geoffs3310的解決方案，我發現這是產生IE11中有關item.element.offsetParent的錯誤未定義。我最終提出了一種替代解決方案，似乎稍微複雜一些。我用這個功能對我templateSelection：

function select2IncludeOptgroupSelection(item) { 
    // If the element does not belong to an optgroup, just return the text 
    if ((item.element.parentElement.tagName != 'OPTGROUP') || !item.element.parentElement.label) { 
     return item.text; 
    } 
    else { 
     return item.element.parentElement.label + ': ' + item.text; 
    } 
}

在我的情況下，我們使用腳本加載的所有多選擇我們所有的標準選擇2的設置，所以我想使功能僅適用，如果一個特定的類是在選擇字段。所以這是我最終使用的版本：

function select2IncludeOptgroupSelection(item) { 
    // If the element does not belong to an optgroup, just return the text 
    if (item.element.parentElement.tagName != 'OPTGROUP') { 
     return item.text; 
    } 

    // If we are still here, determine whether we want to add the label 
    var select_name = item.element.parentElement.parentElement.name; 

    var addOptgroup = $('select[name="'+ select_name +'"]').hasClass('selection-add-optgroup'); 

    if (addOptgroup && item.element.parentElement.label) { 
     return item.element.parentElement.label + ': ' + item.text; 
    } 
    else { 
     return item.text; 
    } 
}

來源

2016-08-24 22:19:19 cdaveb

jQuery的選擇2顯示OPTGROUP標籤

回答

相關問題