count number of variables selected in dropdown using javascript

Question

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:

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

Your first problem is that your code is generating invalid HTML. Element `id` values **must be unique**. If I'm reading your question right, you end up with multiple `select` elements with the `id` `examinerID`. So that's the first thing to fix. — T.J. Crowder, Jun 05 '16 at 08:15

Sabith · Accepted Answer · 2016-06-05T09:40:51.293

2

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

edited Jun 05 '16 at 09:40

answered Jun 05 '16 at 08:22

Sabith

1,628
2
20
38

Thank you for your time but how can i display the count for each name? – Mong2203 Jun 05 '16 at 08:29
`console.log ` check console – Sabith Jun 05 '16 at 08:32
Two questions: 1. Is this suppose to be written like this: ` count[selectedValue] = (count[selectedValue])? count[selectedValue]+1:1;` with long spaces – Mong2203 Jun 05 '16 at 08:36
2. Is it like this : Mark: – Mong2203 Jun 05 '16 at 08:37
1. Nop. Its the ternary or Conditional operator. No need for that long space. count[selectedValue] = (count[selectedValue])?count[selectedValue]+1:1; 2. Its part of JS itself. I have made an edit to the answer, please check above answer. – Sabith Jun 05 '16 at 08:44
The JS you gave was to count the variables but how can I see the count value once I select the name? – Mong2203 Jun 05 '16 at 08:52
copy and paste the above JS, after changing or selecting the value from drop down, press F12 to open developer tool, there you can see the output in 'console' tab. – Sabith Jun 05 '16 at 08:59
The console returns an error `hitcounter.jsp:11 Uncaught ReferenceError: $ is not defined` which is this line `$(".examinerID").on("change",function(){` – Mong2203 Jun 05 '16 at 09:22
$ is for jQuery. wait. i will change the above code to javascript only – Sabith Jun 05 '16 at 09:23
Okay :) and how about displaying it in the HTML/JSP page – Mong2203 Jun 05 '16 at 09:33
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113837/discussion-between-sabith-and-mong2203). – Sabith Jun 05 '16 at 09:41
chnage HTML part as well – Sabith Jun 05 '16 at 10:04

score 1 · Answer 2 · edited May 23 '17 at 11:46

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

count number of variables selected in dropdown using javascript

2 Answers2