Question

我的select选项有问题。我需要按字母顺序排序不同的选择选项（使用text和auguali value选项）。我发现一个有趣的脚本似乎只适用于单个选项而不是多个选择。有没有办法对每个选择进行排序？例如，单击以选择排序但现在与选项重叠。

$('.button').click(function() {
    var options = $('select option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });
});

jsfiddle

由于

Answer 1

您的代码尝试对DOM中的每个选项进行排序，您需要单独对每个选项进行排序。

您可以将代码插入到函数中，并为每个选择使用唯一标识符，这是一个工作示例：

<!doctype html>
<html lang="it">
    <meta charset="utf-8" />
    <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
        $(function() {
            $('.button').click(function() {
            sortSelect('prima');
        })
        $('.button_2').click(function() {
            sortSelect('seconda');
        })

        function sortSelect( selectId ) {
            var options = $('select#'+selectId+' option');
            var arr = options.map(function(_, o) {
                return {
                    t: $(o).text(),
                    v: o.value
                };
            }).get();
            arr.sort(function(o1, o2) {
                return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
            });
            options.each(function(i, o) {
                console.log(i);
                o.value = arr[i].v;
                $(o).text(arr[i].t);
            });
        };
    });
    </script>
</head>
<body>
    <select id="prima">
        <option value="uno">uno</option>
        <option value="due">due</option>
        <option value="tre">tre</option>
    </select>
    <select id="seconda">
        <option value="uno">uno</option>
        <option value="due">due</option>
        <option value="tre">tre</option>
    </select>
    <button class="button">Ordina la prima select</button>
    <button class="button_2">Ordina la seconda select</button>
</body>

Answer 2

通过这种方式，您可以从ALL选择中获得所有选项。这就是为什么你会有很多重复。

您必须对每个选择进行迭代，并仅对其选项进行排序。

此外，您可以使用localeCompare来比较两个字符串。

$('button#sort').click(function () {
    $('select').each(function () {
       var options = $(this).children('option');
        options.sort(function (optionA, optionB) {
            return optionA.value.localeCompare(optionB.value);
        });
        $(this).empty().append(options);
    });
});

jsFiddle

按字母顺序排序更多选择选项

2 个答案: