javascript - 使用 javascript 从下拉列表中删除组标题

Question

我使用此代码对下拉列表控件的项目进行分组:

var item;

var GroupsGRP = jQuery('<optgroup/>', {
    label: 'Groups'
}).appendTo(selectControl);

var EmployeesGRP = jQuery('<optgroup/>', {
    label: 'Employees'
}).appendTo(selectControl);

jQuery('option', selectControl).each(function (i) {
    item = jQuery(this);

    if (item.attr("class") == 'Employees') {
        item.appendTo(EmployeesGRP);
    }
    else {
        item.appendTo(GroupsGRP);
    }

});

其输出是:

Employees
  Employee number one
  Employee number two
Groups
  Group number one
  Group number two

问题:

如果没有项目，如何删除组标题？

Answer 1

只需将您想要分组的类的选项包裹起来，其余的将保持不分组:

假设您的 html 是:

<SELECT id="MainContent_DropDownList1">
    <option>Select One</option>
    <option class="Employees">Employee number one</option>
    <option class="Employees">Employee number two</option>
    <option class="Groups">Group number one</option>
    <option class="Groups">Group number two</option>
    <option>Not an employee or group</option>
</SELECT>

还有 jquery:

$(function() {

    var EmployeesGRP = $('<optgroup/>');
    var GroupsGRP = $('<optgroup/>');

    EmployeesGRP .attr('label', 'Employees');
    GroupsGRP .attr('label', 'Groups');

    $('#MainContent_DropDownList1 .Employees').wrapAll(EmployeesGRP);
    $('#MainContent_DropDownList1 .Groups').wrapAll(GroupsGRP);

});

LIVE EXAMPLE HERE - jsFiddle