0

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

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

谢谢

4

2 回答 2

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>

于 2013-06-11T09:46:53.343 回答
0

这样，您就可以从所有选择中获得所有选项。这就是为什么你会有很多重复的原因。

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

此外，您可以使用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

于 2013-06-11T09:44:55.380 回答