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标签

回答

相关问题