檢查所有選擇是否在Jquery中完成

Question

我正在嘗試計算VISIBLE選擇的數量（我已經在Jquery的警報中完成了此操作），並且還計算了已選擇選項的VISIBLE選擇的數量。 如果兩個數字都匹配，請執行一些操作。

當前，當我更改第一個選擇並選擇一個選項時，它不會提示輸入值。 當我更改下一個選擇並選擇一個選項時，當計數為2時，它顯示計數為1。當我選擇第三個選擇時，其顯示為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上 。