Question

您好我有隐藏的选择框，每次我尝试检查是否所有选择框都被选中并且它保持包含隐藏的选择框时，如何使以下代码仅适用于可见的选择框？已经尝试.filter(':visible')但没有帮助？

if($('option[disabled]:selected').length == 0){
   // ALL the select boxes have something selected rather than the default option
   alert("success");
}else{
    alert("fail");
}

其中一个可见的选择框：

<div class="one-wrap">
  <label for="one-amount">one</label>
  <div id="one-select-wrap">    
    <select id="one-amount" class="" name="">
      <option disabled selected value> -- select an amount -- </option>
      <option value="1000">100 000 one</option>
      <option value="1000">225 000 one</option>
      <option value="1000">450 000 one</option>
      <option value="1000">1 750 000 one</option>
    </select>
  </div>
</div>

一个隐藏的例子：

<div class="two-wrap hidden">
  <label for="two-amount">two</label>
  <div id="two-select-wrap">    
    <select id="two-amount" class="" name="">
      <option disabled selected value> -- select an amount -- </option>
      <option value="1000">200 000 two</option>
      <option value="1000">430 000 two</option>
      <option value="1000">260 000 two</option>
      <option value="1000">500 000 two</option>
    </select>
  </div>
</div>

Answer 1

您可以只查询未隐藏的div中的select，而不是迭代。对于您的示例，请尝试

$('div:not(.hidden) div select')

Answer 2

尝试迭代所有选中的复选框，然后使用closest和length查看父元素是否隐藏了类。

$( "select" ).change(function () {
    var message = "success";  
    $('select').each(function() {
        if ( $(this).val() == null && $(this).closest('.hidden').length == 0 ) {
            message = "fail";  
        }
    }); 
    alert(message);
});

CodePen

Answer 3

为您的父div提供一个类，例如<div class="one-wrap divs"> <div class="one-wrap divs hidden"> //ASSUMING THIS HAS display:none

$(".divs:visible").each(function(){
    var select = $(this).find("select");
    //YOUR CODE
});

现在遍历

 List<int> list1 = {1,2,3};
 List<int> list2 = {3,4};

Answer 4

尝试迭代可见的div：

function checkAllSelected() {
    var unselected = 0;
    $('.two-wrap').not('.hidden').each(function() {
        if ($(this).find('option:selected').not('[disabled]').length === 0) {
           unselected++;
        }
    });
    return unselected === 0;
}

Answer 5

您可以将选择的选项与未选择的选项

进行匹配

$("#one-amount,#two-amount").on("change", function() {
  if ($('select option[disabled]:selected').length == $(".hidden select").length) {
    alert("success");
  } else {
    alert("fail");
  }

});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-wrap">
  <label for="one-amount">one</label>
  <div id="one-select-wrap">
    <select id="one-amount" class="" name="">
      <option disabled selected value>-- select an amount --</option>
      <option value="1000">100 000 one</option>
      <option value="1000">225 000 one</option>
      <option value="1000">450 000 one</option>
      <option value="1000">1 750 000 one</option>
    </select>
  </div>
</div>

<div class="two-wrap">
  <label for="one-amount">two</label>
  <div id="two-select-wrap">
    <select id="two-amount" class="" name="">
      <option disabled selected value>-- select an amount --</option>
      <option value="1000">100 000 one</option>
      <option value="1000">225 000 one</option>
      <option value="1000">450 000 one</option>
      <option value="1000">1 750 000 one</option>
    </select>
  </div>
</div>

<div class="two-wrap hidden">
  <label for="two-amount">two</label>
  <div id="two-select-wrap">
    <select id="two-amount" class="" name="">
      <option disabled selected value>-- select an amount --</option>
      <option value="1000">200 000 two</option>
      <option value="1000">430 000 two</option>
      <option value="1000">260 000 two</option>
      <option value="1000">500 000 two</option>
    </select>
  </div>
</div>

检查是否所有VISIBLE选择框都已选中？

5 个答案: