Question

我用一组数据填充选择列表。像这样：

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

如何以相同的方式追加optgroups？数据数组是一个列表，其属性为Text，Value，OptGroup（boolean）并且是有序的，因此OptGroup首先跟随它的选项。像这样：

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

Answer 1

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

但有几点：

optgroups会附加到select，而选项需要附加到您添加的最后一个optgroup。 optgroup是一个选项容器，而不是它们之前的标题。
optgroup上的文字由label=""属性设置，而不是值/文字。

$(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>

填充选择列表，包括OptGroup

1 个答案: