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

Question

我有一个<select>这是动态填充的。我需要将这些选项部分分组为 <optgroup> tag/简化情况下的代码是:

html:

<select id="mySelect" size="9">
</select>
<h1>how to add them with code only?</h1>

JS:

var opt = [
        {name:"somefriend1"},
        {name:"somefriend2"},
        {name:"someother1", tag: 'other'},
        {name:"someother2", tag: 'other'},
        {name:"somerequest1", tag: 'request'},
        {name:"somerequest2"},
        {name:"somesent1", tag: 'request'},
        {name:"somesent2"}
];

$(function(){
    var $select = $('#mySelect');
    $.each(opt, function(index){
            $('<option />').html(this.name).appendTo($select);
            // TODO: group into 
    });
});

作为jsfiddle .

预期结果:

<select id="mySelect" size="9">
  <option>somefriend1</option>
  <option>somefriend2</option>
  <optgroup label="other">
    <option>someother1</option>
    <option>someother2</option>
  </optgroup>
  <optgroup label="request">
    <option>somerequest1</option>
    <option>somesent1></option>
  </optgroup>
  <option>somerequest2</option>
  <option>somesent2</option>
</select>
<h1>how to add them with code only?</h1>

我的完整情况是:我有一个<select>这是在 knockout.js 的帮助下生成的，如下所示:

<select class="form-control" data-bind="options: $data.options, optionsText: 'name', optionsAfterRender: $data.setOptionDisable, value: $data.cur"></select>

我想使用optionsAfterRender <select> 时适当回调以分组选项正在生成。

编辑:非常抱歉，我弄乱了我的 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>

fiddle 手http://jsfiddle.net/m6e478sd/13/