jQuery select2 选中时显示 optgroup 标签

Question

我正在使用 jQuery 插件 Select2

如果我有一个具有以下结构的 multiselect：

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

如果我 select "Office 1" 在标记为 Locations 的选项组下，则 selected 选项上的标签显示 "Office 1"

有没有办法改变它，让它也显示 optgroup 标签，这样 selection 选项上的标签就会显示 "Location: Office 1"。

我指的标签见下图：

Answer 1

我为你做了一个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; }
    });

Answer 2

我最后使用 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;
        }
    }
});

Answer 3

当我尝试使用 geoffs3310 的解决方案时，我发现它在 IE11 中生成关于 item.element.offsetParent 未定义的错误。我最终想出了一个似乎不那么复杂的替代解决方案。我将此函数用于我的模板选择：

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;
    }
}

在我的例子中，我们使用脚本为所有 multi-select 加载我们所有的标准 select2 设置，所以我想让该功能仅在特定 class 时应用] 在 select 字段上。所以这是我最终使用的版本：

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;
    }
}

jQuery select2 选中时显示 optgroup 标签

jQuery select2 show optgroup label when selected

javascript

jquery

select2