Question

在我的应用程序中，我有一个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);
            }
        }
    }

如果我记录order_by_kind()的结果，则会根据需要对选项值进行排序。我清空列表的内容并按所需顺序重建它，但该项始终位于列表的最后。记录s_option表示该选项已设置为已选中，但从未在UI中选择该项。我可能做错了什么？

修改

我的order_by_kind()功能如下：对于那些想要验证它是否正常运行的人来说：

    function order_by_kind(obj_list) {
        var tmp = [];
        for (index in type_order) {   
          var kind = type_order[index];
          for (obj_index in obj_list) {
            var obj = obj_list[obj_index]
            if (kind == obj.value) {
              tmp.push(obj);
              // break out of the inner loop
              break;
            }
          }
        }
        return tmp
    }

Answer 1

问题在于，虽然我正在迭代有序列表，但我仍然引用未排序列表以构建我的选项。

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);
        }
    }
}

Answer 2

尝试这种方法，存储和恢复所选值：

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);
}

Answer 3

这可能是一个死的问题，但它是搜索结果中的第一个 - 所以我将在这里发布我的解决方案：小提琴包含值和html的比较函数。

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

Fiddle!

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

3 个答案: