Question

我刚刚开始学习如何使用jquery，我有这个代码应该将我的下拉项目分组，它是“员工”或“组”，但输出不是我想要的。请帮忙。提前谢谢

我的代码：

var selectControl = document.getElementById('MainContent_DropDownList1');
var item;

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

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

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

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

});

结果是：

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

INSTEAD：

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

Answer 1

您需要使用.appendTo（）而不是.wrapAll（）

var selectControl = $('#MainContent_DropDownList1')

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

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

    if (item.hasClass("Employees")) {
        item.appendTo(EmployeesGRP );
    } else {
        item.appendTo(GroupsGRP);
    }
});

演示：Fiddle

Answer 2

而不是：

item.wrapAll(EmployeesGRP);

你需要这样做：

item.appendTo(EmployeesGRP);

Wrap all会将EmployeesGRP包装在匹配元素集中的每个项目周围，因为您在这里使用了每个循环。因此，您不必每次都进行包装，只需附加项目即可。

DropdownList中的分组

2 个答案: