检查是否同时选择了两个多选下拉列表

Check whether both of the multiselect dropdown is selected

本文关键字：两个 下拉列表 是否 选择 检查      更新时间：2023-09-26

>我正在创建两个这样的下拉列表

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'将不会发生

我怎样才能做到这一点？

这将解决问题：

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>

您将使用选择

**

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

**

$（"选择"）将同时选择这两个下拉列表。因此，当您签入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');
}

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

$(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）

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

这是另一种只是为了咯咯笑的选择：

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