javascript - 如何检查所有四个多选是否都选择了某个值？

Question

我有 4 个多选，它们是通过这种方式动态创建的

var drp_nt = $('<select />', {
                              'id'     : 'drp_' + nt,
                              'name'   : 'drp_' + nt+'[]',
                              'multiple': true});

var drp_cnt = $('<select />', {
                              'id'     : 'drp_' + cnt,
                              'name'   : 'drp_' + cnt+'[]',
                              'multiple': true});

var drp_ctg = $('<select />', {
                              'id'     : 'drp_' + ctg,
                              'name'   : 'drp_' + ctg+'[]',
                              'multiple': true});

var drp_api = $('<select />', {
                              'id'     : 'drp_' + api,
                              'name'   : 'drp_' + api+'[]',
                              'multiple': true});

现在我想做一个名为

的函数

function check_selection()
{
-----------------
-----------------
}

其中将包含用于检查所有多选是否已选择任何数据的代码。

另外，我如何通过使用所有 4 个多选下拉列表中的事件来调用此函数(因为每当从任何多选中选择任何选项时都会触发此函数)

我尝试了多选的 onchange 事件，但它没有调用该函数。

Answer 1

使用change事件检查所有选择框是否被选中，使用filter()

$("select").change(function () {

    var selectedBox = $("select").filter(function () {
        return this.value != "";
    });
    if (selectedBox.length == 4) {
        alert("4 ckecked")
    }

});

对于动态元素

$(document).on("change", "select[id^=drp_]", function(){
       var selectedBox = $("select").filter(function () {
            return this.value != "";
        });
        if (selectedBox.length == 4) {
            alert("4 ckecked")
        }

    });

<强> DEMO