計算使用JavaScript在下拉列表中選擇的變量數

Question

我找不到適合我問題的任何示例。 我想使用JavaScript從下拉菜單中計算選定的變量。

我最擔心的是，這些下拉菜單值是從db中動態檢索的。下拉菜單會根據表格中顯示的學生人數多次生成。

這是檢查員姓名下拉菜單的代碼：

<select id="examinerID" name="examinerID">
<option selected disabled>Examiners Name</option>
<%
   try{
   //connection
   String query1="select lecturerID, lecturerFullname from lecturer ";
   while(rs1.next())
{
%>

   <option value="<%=rs1.getString("lecturerID") %>"><%=rs1.getString("lecturerFullname") %></option>

    //close connection and exception
 %> 
</select>

實際上是這樣的：

在表格下方，我想添加檢查者列表（也可以從db中檢索），並且我要計算選擇檢查者的次數。

假設這些是下拉菜單中的值（為了易於理解）：

<select id="examinerID" name="examinerID">
<option selected disabled>Examiners Name</option>
<option>Mark</option>
<option>Adam</option>
<option>Lucy</option>
<option>John</option></select>

對選定的審查員進行計數的預期結果：

Mark: 2 //assuming Mark has been selected twice
Adam: 1
Lucy: 1
John: 0 //assuming John is not selected to be an examiner

Answer 1

重新輸入HTML：

<select id="examinerID" name="examinerID" onchange="checkLecturer()">

首先，刪除該id值。 如果要循環輸出（如屏幕截圖所示），則說明您創建的文檔無效，因為id值必須唯一。

如果你的目標是獲得的價值select ，改變，通過this插入checkLecturer功能：

<select name="examinerID" onchange="checkLecturer(this)">
<!-- Here ----------------------------------------^^^^ -->

...然后在checkLecturer ，第一個參數將是對select元素的引用：

function checkLecturer(select) {
    // Use select.value or select.selectedIndex
}

如果您的目標是訪問所有 select框的值，則可以使用document.querySelectorAll找到它們：

var selects = document.querySelectorAll("select[name=examinerID]");

這將為您提供一個NodeList ，其length告訴您找到了多少個。 您可以像訪問NodeList一樣訪問每個數組。 因此，例如，這將顯示它們每個的當前值：

var selects = document.querySelectorAll("select[name=examinerID]");
Array.prototype.forEach.call(selects, function(select, index) {
    console.log("#" + index + ": " + select.value);
});

（更多關於該奇數尋找使用forEach在此答案上通過陣列和陣列狀的東西，如循環NodeList峰）

Answer 2

創建多個select實例時，將ID更改為class。 例如：

HTML：-

<select class="examinerID" name="examinerID">
     <option selected disabled value="">Examiners Name</option>
     <option value="Mark">Mark</option>
     <option value="Adam">Adam</option>
     <option value="Lucy">Lucy</option>
     <option value="John">John</option>
</select>
<select class="examinerID" name="examinerID">
     <option selected disabled value="">Examiners Name</option>
     <option value="Mark">Mark</option>
     <option value="Adam">Adam</option>
     <option value="Lucy">Lucy</option>
     <option value="John">John</option>    </select>
<select class="examinerID" name="examinerID">
     <option selected disabled value="">Examiners Name</option>
     <option value="Mark">Mark</option>
     <option value="Adam">Adam</option>
     <option value="Lucy">Lucy</option>
     <option value="John">John</option>
</select>
<select class="examinerID" name="examinerID">
     <option selected disabled value="">Examiners Name</option>
     <option value="Mark">Mark</option>
     <option value="Adam">Adam</option>
     <option value="Lucy">Lucy</option>
     <option value="John">John</option>
</select>

JS：-

var count = {};
var selects = document.querySelectorAll("select[name=examinerID]");
for(var i=0;i<selects.length;i++){
    selects[i].addEventListener("change",function(event){
    count = {};
    Array.prototype.forEach.call(selects, function(select, index) {
        var selectedValue = select.value;
        if(selectedValue != "")
            count[selectedValue] = (count[selectedValue])?count[selectedValue]+1:1;
    });
    console.log(count)
});
}