Question

Supose i have

<select id="select_0_0">
    <option value="3">3</option>
    <option value="1">1</option>
    <option value="a">a</option>
</select>
<select id="select_0_1">
    <option value="abc">abc</option>
    <option value="a">a</option>
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="B">B</option>
    <option value="2">2</option>
</select>
...
<select id="select_n_m">
    <option value="xxx">xxx</option>
    <option value="zzz">zzz</option>
    <option value="1">1</option>
    <option value="3">3</option>
</select>

在同一页面上还有更多这样的内容。

如何使用javascript对所有选项进行排序，以获得此结果：

<select id="select_0_0">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="a">a</option>
</select>
<select id="select_0_1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="a">a</option>
    <option value="abc">abc</option>
    <option value="B">B</option>
</select>
...
<select id="select_n_m">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="xxx">xxx</option>
    <option value="zzz">zzz</option>
</select>

我试过的代码：

$("select").html($("option").sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}))

但它结合了每个选择中所有选择的所有选项。有解决方案吗？提前谢谢

Answer 1

您应该遍历select元素，然后对子项进行排序：

$('select').each(function () {
    $("option", this).sort(function (a, b) {
        return a.text.localeCompare(b.text);
    }).appendTo(this);
});

http://jsfiddle.net/ew8f8dak/

Answer 2

您将id提供给select字段，但不要使用它们。使用两个for循环 - 从0开始，第一个循环直到行数，第二个，内部循环直到行中的元素数。如果每行中select的数量相同，则效果最佳。

通过这种方式，您可以获取每个select元素的ID，并且您可以使用此ID逐个对每个select进行排序。

编辑：由于我不熟悉jquery，我无法包含代码。从那以后我查了一下，你可以用它来选择一个项目的id：$("#itemID")。

所以，代码应该看起来像这样（再次，我不熟悉jquery）：

for(int i = 0; i < numberOfRows; i++){
    for(int j = 0; j < numberOfEelements; j++){
        selectID = "select_" + i + "_" + j;
        $("#selectID").html($("option").sort(function (a, b) {
           return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }))
    }
}

在同一页面中按值属性排序多个选项

2 个答案: