Mong2203 Mong2203 - 5 months ago 30
HTML Question

count number of variables selected in dropdown using javascript

I could not find any example that suite my problem. I would like to count selected variables from drop down menu using javascript.

My biggest concern is, these drop down menu values are dynamically retrieved from db.The drop down menu is generated multiple times depending on number of student displayed in the form.

This is the codes for drop down menu of examiner name:

<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>


This is how it actually looks like:

enter image description here

Below the form, I would like to add a list of the examiner (also retrieve from db) and I would like to count how many times an examiner has been selected.

Assume these are the value in drop down menu (to make it easy to understand):

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


Expected outcome of counting the selected examiner:

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

Answer

Change Id to class as you are creating multiple instance of select. For eg:

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)
});
}
Comments