Question

我基本上从服务器获得标准选择。如果选项值为“GROUP”，我需要将该选项更改为选项组。如果选项值为“GROUPEND”，我需要将其更改为结束选项组。选择正确呈现，函数被触发，只是没有正确分组......

我创建了一个这样的函数，它无法正常工作。任何指导将不胜感激。这是代码。我留下了评论，以便您可以看到我尝试过的内容。

 $('#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');
}

Answer 1

我为此设置了一个jsFiddle来测试http://jsfiddle.net/murCv/

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>

使用JQUERY从选项中选择元素OptGroups

1 个答案: