更改时对下拉菜单进行排序

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