CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menu
Mong2203
Mong2203

Reputation: 71

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

Upvotes: 1

Views: 2329

Answers (2)

Sabith
Sabith

Reputation: 1656

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

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074268

Re your HTML:

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

First, remove that id value. If you're outputting that in a loop (as your screenshot suggests), you're creating an invalid document, as id values must be unique.

If your goal is to get the value of the select that changed, pass this into your checkLecturer function:

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

...and then in checkLecturer, the first argument will be a reference to the select element:

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

If your goal is to access the values of all of the select boxes, you can find them with document.querySelectorAll:

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

That will give you a NodeList, with a length telling you how many were found. You can access each one as though the NodeList were an array. So for instance, this will show the current value of each of them:

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

(More on that odd-looking use of forEach in this answer on looping through arrays and array-like things such as NodeLists.)

Upvotes: 1

Related Questions