Question

我有一个＆lt; select＆gt;这是动态填充的。我需要将这些选项部分分组到＆lt; optgroup＆gt;标签/简化案例中的代码是： HTML：＆lt; select id =＆＃34; mySelect＆＃34;大小=＆＃34; 9＆＃34;＆GT; ＆LT; /选择＆GT; ＆lt; h1＆gt;如何仅使用代码添加它们？＆lt; / h1＆gt; JS： var opt = [ {名称：＆＃34; somefriend1＆＃34;}， {名称：＆＃34; somefriend2＆＃34;}， {name：＆＃34; someother1＆＃34;，tag：＆＃39;其他＆＃39;}， {name：＆＃34; someother2＆＃34;，tag：＆＃39;其他＆＃39;}， {name：＆＃34; somerequest1＆＃34;，tag：＆＃39; request＆＃39;}， {名称：＆＃34; somerequest2＆＃34;}， {name：＆＃34; somesent1＆＃34;，tag：＆＃39; request＆＃39;}， {名称：＆＃34; somesent2＆＃34;} ]。 $（函数（）{ var $ select = $（＆＃39;＃mySelect＆＃39;）; $ .each（opt，function（index）{ $（＆＃39;＆lt; option />').html(this.name).appendTo($select）; // TODO：分组到 }）; }）; 作为一个jsfiddle。预期结果：＆lt; select id =＆＃34; mySelect＆＃34;大小=＆＃34; 9＆＃34;＆GT; ＆LT;选项＆GT; somefriend1＆LT; /选项＆GT; ＆LT;选项＆GT; somefriend2＆LT; /选项＆GT; ＆lt; optgroup label =＆＃34;其他＆＃34;＆gt; ＆LT;选项＆GT; someother1＆LT; /选项＆GT; ＆LT;选项＆GT; someother2＆LT; /选项＆GT; ＆LT; / OPTGROUP＆GT; ＆lt; optgroup label =＆＃34; request＆＃34;＆gt; ＆LT;选项＆GT; somerequest1＆LT; /选项＆GT; ＆LT;选项＆GT; somesent1＆GT;＆LT; /选项＆GT; ＆LT; / OPTGROUP＆GT; ＆LT;选项＆GT; somerequest2＆LT; /选项＆GT; ＆LT;选项＆GT; somesent2＆LT; /选项＆GT; ＆LT; /选择＆GT; ＆lt; h1＆gt;如何仅使用代码添加它们？＆lt; / h1＆gt; 我的完整情况是：我有一个＆lt; select＆gt;这是在knockout.js的帮助下生成的，如下所示：＆lt; select class =＆＃34; form-control＆＃34; data-bind =＆＃34;选项：$ data.options，optionsText：＆＃39; name＆＃39;，optionsAfterRender：$ data.setOptionDisable，value：$ data.cur＆＃34;＆gt;＆lt; / select＆gt; 我想使用optionsAfterRender回调来适当地分组选项，而＆lt; select＆gt;正在生成。编辑：非常抱歉，我搞砸了m jsfiddle和一个我用作基础。

Answer 1

在我看来，需要做一些DOM操作才能得到你想要的东西，这对你有用......

 self.setTagGroup=function(option, item)
    {
        if(item.tag)
        {
            var grp =$(option).parent("select").find("[label="+item.tag+"]");
            if(grp.length==0)
            {
                grp = $("<optGroup></optGroup>");
                grp.attr("label",item.tag);
                $(option).parent("select").append(grp);
            }
            grp.append($(option));
        }
    }

并在标记中

<select size="8" data-bind="options: users, optionsText: 'name', optionsAfterRender: setTagGroup, value: selectedUser"></select>

小提琴手http://jsfiddle.net/m6e478sd/13/

Answer 2

我能够通过淘汰来重做这个，没有jQuery（同样，optionsAfterRender是不必要的）：

http://jsfiddle.net/ZP4E9/36/

我必须添加自定义bindingHandler定义，否则它非常简单。我还必须重新格式化opt数据对象以使其自身适用于嵌套的foreach循环，但它基本上是相同的。

<select id="mySelect" size="9" data-bind="foreach: opt, value: selectedOption">
    <optgroup data-bind="attr: {label: label}, foreach: options">
        <option data-bind="text: name, option: name"></option>
    </optgroup>
</select>

如何将<select>中的选项动态分组到optgroups中？

2 个答案: