javascript - 如何计算 Jquery/Javascript 中值发生更改的表单选择的数量

Question

我的表单中有几个选择。如果一个选择的选项已更改，那么它应该增加计数器。 5 个选择，则计数器应为 5。本质上，我想检查是否已选择所有选择，以便我可以提交表单。我不想使用“必需”。

<div id="firstPanelID"
    <div class="form-group input-group">
        <label class="fixingLabelAlignmentInner">Transfer Code of Center from which Infant Transferred : </label>
        <div class="fixingInputAlignmentInner">
            <select id="transferCodePIW" name=transferCodePIW class="form-control" style="height:32px;width:80%;">
            <option disabled selected value>SELECT</option>
            <option value="13240">13240 - Mowbray Maternity Hospital</option>
            <option value="14994">14994 - New Somerset Hospital</option>
            <option value="16011">16011 - Tygerberg Hospital</option>
            <option value="8005432">8005432 - Khayelitsha District Hospital</option>
            <option value="8005433">8005433 - Michell's Plain District Hospital</option>
            <option value="8005435">8005435 - Red Cross Children's Hospital</option>
            <option value="97777777">97777777 - Birth at Home or in Transit</option>
            <option value="">Other</option>
            <option value="77777777">N/A</option>
            <option value="99999999">Unknown</option>
        </select>
        </div>
    </div>
</div>

我已经尝试过以下方法。由于其他单选按钮，选择可能是可见/不可见的，因此可见。该功能适用​​于单选按钮，但我无法让它适用于选择。

var sgroups = [];
    $('#firstPanelID select:visible:selected').each(function(index, el){
            var i;
            for(i = 0; i < sgroups.length; i++)
                if(sgroups[i] == $(el).attr('name'))
                    return true;
            sgroups.push($(el).attr('name'));
        }
    );
alert(($('#firstPanelID select:visible:selected').length))

Answer 1

我认为代码是不言自明的。

var counter = 0;

$('select').change(function () {
  var o = $(this);
	if (!o.hasClass('counted')) {
  	counter++;
    o.addClass('counted');
   }
    
  $('#counter').text(counter);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
<select>
<option value="2aa">2aa</option>
<option value="2bb">2bb</option>
<option value="2cc">2cc</option>
</select>
<select>
<option value="3aa">3aa</option>
<option value="3bb">3bb</option>
<option value="3cc">3cc</option>
</select>

<div id="counter">
0
</div>