如何動態重新排列選擇列表？

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

這可能是一個死問題，但是它是搜索結果中的第一個問題-因此，我將在此處發布我的解決方案：小提琴包含value和html的compare函數。

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

小提琴！

Answer 3

嘗試這種方法，存儲並恢復所選值：

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