如何計算在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); 
 
\t if (!o.hasClass('counted')) { 
 
    \t 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>

Answer 2

可以使用.one()到單個change事件附加到每個<select>元件，當count等於$("selector").length呼叫.off()以除去change事件，則執行操作，例如，提交<form>元件。

let count = 0; 
 

 
$("select").one("change", function() { 
 

 
    ++count; 
 
    
 
    console.log(count); 
 
    if (count === $("select").length) { 
 
    $("select").off("change"); 
 
    // submit form here 
 
    console.log(count + " is " + $("select").length) 
 
    } 
 
})

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