Сортировка выпадающего меню при изменении

Question

У меня есть страница, которая строит выпадающее меню динамически из базы данных следующим образом:

<select name="set_order[]" class="form-control" data-catid="3"> 
    <option value="1" selected="">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<select name="set_order[]" class="form-control" data-catid="2"> 
    <option value="1">1</option> 
    <option value="2" selected="">2</option> 
    <option value="3">3</option> 
</select> 
<select name="set_order[]" class="form-control" data-catid="1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3" selected="">3</option> 
</select> 

То, что я хочу сделать то, что, когда один из них меняется, я хочу прибегнуть выпадающие списки в соответствии с изменением, которое было сделано с помощью Javascript, и обновлением выбранного раскрывающегося списка в каждом раскрывающемся списке, так что каждый выпадающий имеет уникальный выбор.

Я пытался их сортировать, но я не был успешным.

Благодарим вас за продвинутый!

Edit, в соответствии с просьбой, вот мой пробный JS сортировать их:

$(document).on('change', 'select[name="set_order[]"]', function(){ 
    var newOrder = $(this).val(); 
    var change_id = $(this).attr('data-catid'); 

    console.log(newOrder, ' ', change_id); 

    var order = new Array(); 
    var cat_id = new Array(); 

    var checker = false; 
    $('select[name="set_order[]"]').each(function(i){ 
     order[i] = parseInt($(this).val()); 
     cat_id[i] = parseInt($(this).attr('data-catid')); 

     console.log(order[i], ' ', cat_id[i], ' ', i); 

     if(checker == false){ 
      if(cat_id[i] == change_id){ 
       checker = true; 
      }else{ 
       order[i] = order[i] + 1 ; 
      } 
     }else{ 
      order[i] = order[i] - 1; 
     } 

     //console.log(order[i], ' ', cat_id[i], ' ', i); 
    }); 


}); 

Answer 1

Вы можете сделать это с помощью JQuery

//Sort alphabetically the contact list in the biography page 
function sortList() { 
//Replace #list by the id of the div who enclose your select 
    $("#list").html(
     $(".form-control").children("option").sort(function (a, b) { 

      return $(a).text().toUpperCase().localeCompare(

      $(b).text().toUpperCase()); 
     }) 
    ); 
};