填充 Select 列表，包括 OptGroup

Question

我正在用一组数据填充一个 select 列表。像这样：

$(somedata).each(function() {
    $(document.createElement('option'))
        .attr('value', this.Value)
        .text(this.Text)
        .appendTo(SelectList);
});

如何以同样的方式追加 optgroups？数据数组是一个列表，其中包含属性 Text、Value、OptGroup（布尔值）并且已排序，因此 OptGroup 首先出现，然后是它的选项。像这样：

[
    ['OptGroup1', 'OptGroup1', true]
    ['Value1', 'Value1', false]
    ['Value2','Value2',false]
    ['OptGroup2', 'OptGroup2', true]
    // ...
]

Answer 1

答案非常简单 - 检查第三个值是真还是假，并相应地创建适当的元素。

不过有几点：

选项组附加到 select，而选项需要附加到您添加的最后一个选项组。 optgroup 是选项的容器，而不是选项之前的标题。
optgroup 上的文本由 label="" 属性设置，而不是 value/text。

$(function () {
    var somedata = [
        ['OptGroup1', 'OptGroup1', true],
        ['Value1', 'Value1', false],
        ['Value2', 'Value2', false],
        ['OptGroup2', 'OptGroup2', true],
        ['Value3', 'Value3', false],
        ['Value4', 'Value4', false]
    ];
    console.log(somedata);
    var SelectList = $("#SelectList");
    $(somedata).each(function () {
        var $newElem;
        if ($(this)[2] == false) {
            $newElem = $(document.createElement('option')).attr('value', this[1])
            .attr('label', this[0])
            .appendTo(SelectList.find("optgroup").last());
        } else {
            $newElem = $(document.createElement('optgroup')).attr('value', this[1])
            .attr('label', this[0])
            .appendTo(SelectList);;
        }

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SelectList"></select>

填充 Select 列表，包括 OptGroup

Populating Select List including OptGroup

javascript

jquery

selectlist

optgroup