ドロップダウンメニューをソート

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で行われた変更に応じて変更され、各ドロップダウンで選択されたドロップダウンが更新されるようにドロップダウンが更新されます。

私はそれらを並べ替えることを試みてきましたが、私は成功しませんでした。

ありがとうございました！

編集は、要求されたとして、ここに私の裁判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()); 
     }) 
    ); 
};