Как я могу изменить порядок выбора списка на лету?

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 показывает, что параметр установлен как выбранный, но элемент никогда не выбирается в пользовательском интерфейсе. Что я могу сделать неправильно?

Edit:

Моя 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!