Question

我正在尝试计算VISIBLE选择的数量（我在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。

检查是否在Jquery中完成了所有选择

1 个答案: