Javascript 如何在运行中重新排列选择列表？

在我的应用程序中，我有一个HTML选择框，根据各种用户操作从中删除和添加项目（项目变为可用/不可用）。但是，我也希望所有项目都按首选顺序显示，因此每次我将项目返回到选择列表时，我都需要按首选顺序重新排序并选择首选选项。到目前为止我一直不成功

这是我目前得到的：

    function update_select (select_id) {
        // Rebuild given select box with appropriate options
        var s = $(select_id);
        s.empty();
        for (index in order_by_kind(selectable)) {
            var option = selectable[index];
            var s_option = $('<option value="' + option.value + '">' + option.desc + '</option>')
            s.append(s_option);
            if (index == 0) {
              s_option.attr('selected', true);
              console.log(s_option);
            }
        }
    }

---

尝试此方法，存储并还原选定的值：

function update_select (select_id) {
    // Rebuild given select box with appropriate options
    var s = $(select_id);
    var val = s.val();
    s.empty();
    for (index in order_by_kind(selectable)) {
        var option = selectable[index];
        var s_option = $('<option value="' + option.value + '">' + option.desc + '</option>')
        s.append(s_option);
    }
    s.val(val);
}

功能更新\u选择（选择\u id）{
//使用适当的选项重建给定的选择框
var s=$（选择_id）；
var val=s.val（）；
s、 空（）；
for（按顺序按种类索引（可选））{
var选项=可选[指数]；
var s_option=$（''+option.desc+''）
s、 附加（s_选项）；
}
s、 val（val）；
}

尝试这种方法，存储并恢复选定的值：

function update_select (select_id) {
    // Rebuild given select box with appropriate options
    var s = $(select_id);
    var val = s.val();
    s.empty();
    for (index in order_by_kind(selectable)) {
        var option = selectable[index];
        var s_option = $('<option value="' + option.value + '">' + option.desc + '</option>')
        s.append(s_option);
    }
    s.val(val);
}

功能更新\u选择（选择\u id）{
//使用适当的选项重建给定的选择框
var s=$（选择_id）；
var val=s.val（）；
s、 空（）；
for（按顺序按种类索引（可选））{
var选项=可选[指数]；
var s_option=$（''+option.desc+''）
s、 附加（s_选项）；
}
s、 val（val）；
}

问题在于，尽管我在遍历有序列表，但为了构建选项，我仍然在引用未排序的列表

function update_select (select_id) {
    // Rebuild given select box with appropriate options
    var s = $(select_id);
    s.empty();
    // sort and write back the selectable items
    selectable = order_by_kind(selectable);
    for (index in selectable) {
        var option = selectable[index];
        var s_option = $('<option value="' + option.value + '">' + option.desc + '</option>')
        s.append(s_option);
        if (index == 0) {
          s_option.attr('selected', true);
          console.log(s_option);
        }
    }
}

功能更新\u选择（选择\u id）{
//使用适当的选项重建给定的选择框
var s=$（选择_id）；
s、 空（）；
//对可选项进行排序并写回
可选=按种类订购（可选）；
用于（可选择的索引）{
var选项=可选[指数]；
var s_option=$（''+option.desc+''）
s、 附加（s_选项）；
如果（索引==0）{
s_option.attr（'selected'，true）；
console.log（s_选项）；
}
}
}

问题在于，尽管我在遍历有序列表，但为了构建选项，我仍然在引用未排序的列表

function update_select (select_id) {
    // Rebuild given select box with appropriate options
    var s = $(select_id);
    s.empty();
    // sort and write back the selectable items
    selectable = order_by_kind(selectable);
    for (index in selectable) {
        var option = selectable[index];
        var s_option = $('<option value="' + option.value + '">' + option.desc + '</option>')
        s.append(s_option);
        if (index == 0) {
          s_option.attr('selected', true);
          console.log(s_option);
        }
    }
}

功能更新\u选择（选择\u id）{
//使用适当的选项重建给定的选择框
var s=$（选择_id）；
s、 空（）；
//对可选项进行排序并写回
可选=按种类订购（可选）；
用于（可选择的索引）{
var选项=可选[指数]；
var s_option=$（''+option.desc+''）
s、 附加（s_选项）；
如果（索引==0）{
s_option.attr（'selected'，true）；
console.log（s_选项）；
}
}
}

这可能是一个死问题，但它是搜索结果中的第一个问题-因此我将在这里发布我的解决方案：fiddle包含value和html的比较函数

function reOrderOptions(select)
{ 
    function compareOptions(optionA, optionB) {
        return optionA.value - optionB.value;
    }
var options = $(select + " option");
$(select).empty().append(options.sort(compareOptions));
}

---

这可能是个死问题，但它是搜索结果中的第一个问题-因此我将在这里发布我的解决方案：fiddle包含value和html的比较函数

function reOrderOptions(select)
{ 
    function compareOptions(optionA, optionB) {
        return optionA.value - optionB.value;
    }
var options = $(select + " option");
$(select).empty().append(options.sort(compareOptions));
}

---

这似乎不起作用。我只是以一个空白的第一个元素结束，我的选项如下，仍然以错误的顺序。@vezult-你能发布你的

order\u-by\u-kind

方法让我做一个快速测试吗？另外，您是否总是希望在排序后只选择列表中的第一项？实际上，我认为我发现了问题（请参见下面的答案），但为了完整性，我也将发布该问题。关于第二个问题；是的，如果列表顺序正确，第一项应该是首选项。这似乎不起作用。我只是以一个空白的第一个元素结束，我的选项如下，仍然以错误的顺序。@vezult-你能发布你的

order\u-by\u-kind

方法让我做一个快速测试吗？另外，您是否总是希望在排序后只选择列表中的第一项？实际上，我认为我发现了问题（请参见下面的答案），但为了完整性，我也将发布该问题。关于第二个问题；是的，如果列表顺序正确，则首选第一项。