javascript - 检查是否选择了两个多选下拉列表

Question

我正在创建两个这样的下拉菜单

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

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

现在我像这样定义 check_data_function

function check_data()
{
    if($("select option:selected").length==2)
        alert('Two Dropdown Selected');
    else
        alert($("select option:selected").length);
}

当两个下拉菜单都选择了一些选项时，我想启用一个按钮。

在上面的代码片段中，问题是，如果我从下拉列表 drp_nt 中选择 2 选项，并且从 drp_cnt 中不选择任何选项>，然后还会出现警报 'Two Dropdown Selected'。

我想在两个下拉菜单都选择了一些选项时发出警报 'Two Dropdown Selected'。如果一个选择了某些东西而另一个没有选择，则不会出现警报 'Two Dropdown Selected'

我怎样才能做到这一点？

Answer 1

这样就可以了:

function check_data() {
    if ($('select option:selected').parent().length == 2) {
        alert('Two Dropdown Selected');
    }
}

这个想法是您仍然选择选定的选项，但随后您获得它们的父 select 元素并验证其中恰好有两个。

查看下面的演示。

$('select').change(check_data);

function check_data() {
    if ($('select option:selected').parent().length == 2) {
        alert('Two Dropdown Selected');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
    <option>Text 1</option>
    <option>Text 2</option>
    <option>Text 3</option>
    <option>Text 4</option>
</select>

<select multiple>
    <option>Text 1</option>
    <option>Text 2</option>
    <option>Text 3</option>
    <option>Text 4</option>
</select>