检查是否所有的选择都在JQuery中完成

Question

我想要计算可见选择的数量（我在Jquery中的警报中完成的）的数量，并且还计算了选择了选项的VISIBLE选择的数量。如果两个号码匹配，然后执行一些操作。

当前，当我更改第一个选择并选择一个选项时，它不会提示一个值。当我改变下一个选择并选择一个选项时，它显示计数是1，当它是2.当我选择第三个选择，然后显示3.然而这些数字都是不准确的。这是什么原因？

<div id="secondPanelID"> 
    <div class="form-group input-group"> 
     <label for="gestationalAgeInWeeks">Gestational Age : </label> 
     <div> 
      <select id="gestationalAgeInWeeks" name="gestationalAgeInWeeks" class="form-control"> 
         <option disabled selected value>SELECT</option> 
         <option value="0">0</option> 
      </select> 

     </div> 
    </div> 
    <div class="form-group input-group"> 
     <label>days</label> 
     <div> 
      <select name=gestionalDays class="form-control"> 
       <option disabled selected value>SELECT</option> 
       <option value="0">0 Days</option> 
       <option value="1">1 Day</option> 
      </select> 
     </div> 
    </div> 
</div> 

新增听众每一个选择

$("select[name=gestationalAgeInWeeks]").change(checkingColourSelectsGeneralData); 
    $("select[name=gestionalDays]").change(checkingColourSelectsGeneralData); 

jQuery的

var selectCounterInGeneral = 0; 
function checkingColourSelectsGeneralData(){ 
    alert($('#secondPanelID select:visible').length) 
    $('#secondPanelID select:visible').change(function() { 
     var o = $(this); 
     if (!o.hasClass('counted')) { 
     selectCounterInGeneral++; 
     o.addClass('counted'); 
     } 

     alert("number of selects: "+selectCounterInGeneral); 
    }); 


} 

Answer 1

只是检查是否所有可见的选择都有价值是这样的：

function countSelected(e) { 
 
    var toReturn = true; 
 
    $('select:visible').each(function(i) { 
 
     if(!$(this).val()) { 
 
      toReturn = false;   
 
     }; 
 
    }); 
 
    console.log(toReturn); 
 
}; 
 
$('select').on('change', countSelected);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option disabled selected value>--choose--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<select> 
 
    <option disabled selected value>--choose--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<select style="display: none;"> 
 
    <option disabled selected value>--choose--</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select>

也在JSFiddle。