Question

我使用的是jQuery插件https://docs.mongodb.org/manual/reference/operator/update/position/

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

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

如果我选择＆＃34; Office 1＆＃34;在标有Locations的optgroup下，所选选项上的标签显示＆＃34; Office 1＆＃34;

有没有办法改变它，以便它也显示optgroup标签，因此选择选项上的标签会说＆＃34;位置：Office 1＆＃34;。

请参阅下图，了解我所指的标签：

Select2

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未定义。我最终提出了一个似乎不那么复杂的替代解决方案。我在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;
    }
}

在我的情况下，我们使用脚本为所有多选项加载所有标准select2设置，所以我想使该函数仅在选择字段上有特定类时才适用。所以这是我最终使用的版本：

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

3 个答案: