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

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

1 个答案: