javascript - 如何按字母顺序对页面上具有 optgroup 的所有选择框进行排序，而不将选项移出各自的组？

Question

我需要帮助来解决困境。我不知道如何解决这个问题。我需要按选项组( <optgroup> )按字母顺序对网页上的所有选择框(a、b、c、d...)进行排序，然后按字母顺序对每个选项组中的选项进行排序，而不将它们从各自的选项中取出组。

我需要在加载选择框后调用它的 ID 来实现这一点。最好使用纯 JavaScript，但如果不可能，也可以使用 JQuery。

你能处理这个吗？如果是这样，请帮助引导我走向正确的方向。

提前致谢!

-詹姆斯 A.

Answer 1

这个概念与我在上面的评论中引用的概念相同。请参阅下面的函数 orderOptgroups:

$(document).ready(function() {
    orderOptgroups();
});

function orderOptgroups() {
    $("select").each(function() {
        var $select = $(this);
        var $groups = $select.find("optgroup");
        $groups.remove();
        $groups = $groups.sort(function(g1, g2) {
            return g1.label.localeCompare(g2.label);      
        });      
        $select.append($groups);
        $groups.each(function() {
            var $group = $(this);
            var options = $group.find("option");
            options.remove();
            options = options.sort(function(a, b) {
                return a.innerHTML.localeCompare(b.innerHTML);
            });
            $group.append(options);
        });
    });
}

select {
    width:100px;
    height:250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple">
    <optgroup label="Group 2">
        <option value="value11">Label C</option>
        <option value="value21">Label A</option>
        <option value="value31">Label B</option>
    </optgroup>
    <optgroup label="Group 3">
        <option value="value12">Label F</option>
        <option value="value22">Label D</option>
        <option value="value32">Label E</option>
    </optgroup>
    <optgroup label="Group 1">
        <option value="value13">Label X</option>
        <option value="value23">Label Y</option>
        <option value="value33">Label Z</option>
    </optgroup>
</select>
<select multiple="multiple">
    <optgroup label="Group C">
        <option value="value11">Label 9</option>
        <option value="value21">Label 8</option>
        <option value="value31">Label 7</option>
    </optgroup>
    <optgroup label="Group B">
        <option value="value12">Label 5</option>
        <option value="value22">Label 6</option>
        <option value="value32">Label 4</option>
    </optgroup>
    <optgroup label="Group A">
        <option value="value13">Label 3</option>
        <option value="value23">Label 1</option>
        <option value="value33">Label 2</option>
    </optgroup>
</select>