Javascript 使用JQUERY从选项中选择元素OptGroup

我基本上从服务器上得到了一个标准的select。如果选项值为“组”，我需要将该选项更改为选项组。如果选项值为“GROUPEND”，我需要将其更改为end选项组。选择正确渲染，函数被激发，只是没有正确分组

我创建了这样一个函数，但它不起作用。任何指导都将不胜感激。这是代码。我留下了评论，这样你就可以看到我尝试了什么

 $('#residualModelSelector').multiselect({
    header: true,
    selectedList: 5,
    click: function (e) {
        //allow only 5 to be selected
        if ($(this).multiselect("widget").find("input:checked").length > 5) {
            return false;
        }
    }
}).multiselectfilter()
  .live( updateModelGroups($('#residualModelSelector')));

function updateModelGroups(residualModelSelector){
    $('#residualModelSelector').find('option').each(function () {
        var strOptGroup = $(this).val().split('-');
        var strOptGroupChk = strOptGroup[0];
        var strOptGroupLabel = strOptGroup[1];
        if (strOptGroupChk == 'GROUP') {
            var replaceThisOption = document.createElement('optgroup');
            replaceThisOption.label = strOptGroupLabel;
            $(this).replaceWith(replaceThisOption);
                //.html('<optgroup label=' + strOptGroupLabel + '>');
            //.replaceWith('<optgroup label=' + strOptGroupLabel + '>');
        } else if (strOptGroupChk == 'GROUPEND') {
            var replaceThisOptionEnd = $('</optgroup>');
            $(this).replaceWith(replaceThisOptionEnd);
            //$(this).replaceAll('</optgroup>');
                //.html('</optgroup>');
                //.replaceWith('</optgroup>');
        }
    });
    $('#residualModelSelector').multiselect('refresh');
}

---

我为这个测试设置了一个JSFIDLE

1我假设您的选择框看起来像

<select id="residualModelSelector">
    <option value="some-node1">Out side opt groups 1</option>
    <option value="GROUP-first">FirstGroup</option>
    <option value="first-node1">Inside First group 1</option>
    <option value="first-node2">Inside First group 2</option>
    <option value="GROUPEND-first">End FirstGroup</option>
    <option value="some-node2">Between Groups</option>
    <option value="GROUP-second">SecondGroup</option>
    <option value="second-node1">Inside Second group 1</option>
    <option value="second-node2">Inside Second group 2</option>
    <option value="GROUPEND-second">End SecondGroup</option>
    <option value="some-node2">Out side opt groups 2</option>
</select>

这是正在工作的js

var group = null;
$('#residualModelSelector').find('option').each(function () {
    var strOptGroup = $(this).val().split('-');
    var strOptGroupChk = strOptGroup[0];
    var strOptGroupLabel = strOptGroup[1];
    if (strOptGroupChk == 'GROUP') {
        group = $("<optgroup label='"+ strOptGroupLabel + "' ></optgroup>").insertBefore($(this));
    } else if (strOptGroupChk == 'GROUPEND') {
        group = null;
    }

    if (strOptGroupChk == 'GROUP' || strOptGroupChk == 'GROUPEND') {
        $(this).remove();
        return;
    }

    if (group != null)
        $(this).appendTo(group);

});

生成的html

<select id="residualModelSelector">
    <option value="some-node1">Out side opt groups 1</option>
    <optgroup label="first">
        <option value="first-node1">Inside First group 1</option>
        <option value="first-node2">Inside First group 2</option>
    </optgroup>
    <option value="some-node2">Between Groups</option>
    <optgroup label="second">
        <option value="second-node1">Inside Second group 1</option>
        <option value="second-node2">Inside Second group 2</option>
    </optgroup>
    <option value="some-node2">Out side opt groups 2</option>
</select>

---

明亮的另一个问题是，我在修复HTML之前启动了multiselect功能。再次感谢！