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

我想在下拉列表中选择了一些选项时启用按钮。

在上面的代码片段中，问题是，如果我从下拉列表2中选择drp_nt个选项，并从drp_cnt中选择无选项，那么警告{{1正在发生。

我希望在两个下拉列表都选择了一些选项时发出警告'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>

Answer 2

您正在使用select

选择jquery中的两个下拉列表

**

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

**

$（＆＃39; select＆＃39;）将同时选择两个下拉列表。所以当你在jquery中检查时，在你选择了两个一个下拉列表后，这将给你两个选中的结果。所以你需要检查如下

    function check_data()
{
    if($("#id1 option:selected").length>1 && $("#id2 option:selected").length>1)
        alert('Two Dropdown Selected');
    else
        alert('select any one of the option from both dropdown');
}

Answer 3

您可以通过过滤选择列表来执行此操作，以便仅获取选定选项的那些，然后检查长度

$(function(){
  $(document).on('change','select',function(){
      var selectsWithOptionsSelected = $('select').filter(function(){
          return $('option:selected',this).length>0;
      });
      alert(selectsWithOptionsSelected.length);
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select rows="3" multiple>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<select rows=3 multiple>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

您可能想要使用选择器来定位您感兴趣的select个实例，例如，您可以为它们提供一个类并在两个选择器中使用它（select.myClassName）

Answer 4

使用jQuery().each

function check_data()
{
  var counter = 0;
  jQuery('select').each(function() {
    if(jQuery(this).find('option:selected').length == 2) {
      counter++;
    }
  });
  if(counter == jQuery('select').length)
      alert('Two Dropdown Selected');
  else
      alert($("select option:selected").length);
  }

Answer 5

这是另一种替代方案：

function check_data() {
    $('select:has(option:selected)').length > 1 && alert('Foo');
}

检查是否已选中两个多选下拉列表

5 个答案: