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
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)
});
}
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.)
Related
I have dynamically generated the following dropdown list using jquery for the calculator app I am currently making:
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
What now I try is to access the value attribute of every option, but I don't get far. The examiner is showing the value attribute in the elements tab, I can also find under the options when I look at the properties in the browser, but I am unable to access them via JavaScript.
I tried:
const leftVal = $('#field__left').children('option').attr('value');
also
const leftVal = $('#field__left').children('option').data('value');
but it returned undefined, while:
const leftVal = document.querySelector('#field__left').getAttribute('value');
gave me null.
Anybody has the ide where my mistake lies?
Thank you in advance.
I try is to access the value attribute of every option
You need a loop...
$("#field__left option").each(function(){
console.log($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
$('#field__left').children('option') will return an array of all select option nodes, you have to iterate through it to get values of each option
Here is the simple solution
// get list of an options
var options = $('#field__left option');
// Then, convert that into an array of just the values
var values = $.map(options, e => $(e).val())
console.log(values)
We can print the value of select option using
document.querySelector(".choose").value; but I need the name of it's corresponding value
Ex: If the value of select is "VAR CHAR" but you need to print the name as text
<select name='choose' class='choose'>
<option name='text'>VAR CHAR</option>
<option name='number'>NUMBER</option>
<option name='radio'>RADIO</option>
<option name='checkbox'>CHECK BOX</option>
<option name='email'>EMAIL</option>
<option name='file'>FILE</option>
<option name='date'>DATE</option>
<option name='password'>PASSWORD</option>
<option name='range'>RANGE</option>
<option name='tel'>TELEPHONE</option>
<option name='submit'>SUBMIT</option>
<option name='button'>BUTTON</option>
<option name='reset'>RESET</option>
</select>
just tried something..
document.querySelector('.choose').selectedOptions[0].getAttribute('name');
You select element has a class by the name of "choose" and you can use the following code which was written by jquery.
$('.choose').on('change', function() {
var selectedOption = $(this).find('option:selected');
name = selectedOption.attr('name');
});
Looks like you know how to select the element already. Now all you need to do is
var name = element.getAttribute("name");
and then print it.
I try to get the selected value of the dropdown. But it keeps returning the first option value although I may choose different values. Is there any error in the code that makes this error?
<select id="category" name="category">
<option disabled selected value> -- select an option -- </option>
<option value=1>Rock</option>
<option value=2>Classical</option>
<option value="Country">Country</option>
<option value="Folk">Folk</option>
<option value="EDM">EDM</option>
<option value="Heavy Metal">Heavy Metal</option>
<option value="Hip-hop">Hip-hop</option>
<option value="Jazz">Jazz</option>
<option value="Pop">Pop</option>
<option value="Popular">Popular</option>
<option value="Rap">Rap</option>
<option value="Soul">Soul</option>
</select>
function Ulog() {
var select_id = document.getElementById("category");
select_id.options[select_id.selectedIndex].value;
}
This is because you are not listening to change event
try this
const select_id = document.getElementById("category");
select_id.addEventListener('change', evt => {
console.log(select_id.selectedOptions[0].value);
});
I hope this will help
In JavaScript, how to show/hide items from a select list based on another selected option that contain a certain word or words?
I am very new to JavaScript, so any help would be appreciated.
There are two drop-downs: "group" and "alph".
<select name="group">
<option value="Angry (Two)">Angry (Two)</option>
<option value="Happy (Two)">Happy (Two)</option>
<option value="Sad">Sad</option>
<option value="Tired (One)">Tired (One)</option>
</select>
<select name="alph">
<option value="ABC">ABC</option>
<option value="ABC-1">ABC-1</option>
<option value="ABC-2">ABC-2</option>
<option value="DEF">DEF</option>
<option value="DEF-1">DEF-1</option>
<option value="DEF-2">DEF-2</option>
<option value="DEF-3">DEF-3</option>
</select>
Without IDs, for the first dropdown (name group), if the selected value contains " (Two)", then the list will only show:
<select name="alph">
<option value="ABC-2">ABC-2</option>
<option value="DEF-2">DEF-2</option>
</select>
If the user changes selection, and the selected value contains " (One)", then the list will only show:
<select name="alph">
<option value="ABC-1">ABC-1</option>
<option value="DEF-1">DEF-1</option>
</select>
If the user changes selection, and the selected value does not contain neither " (One)" or " (Two)", then the list will show:
<select name="alph">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
<option value="DEF-3">DEF-3</option>
</select>
Note: I am not able to add IDs or attributes. I can only access the name of the select and the value.
Use data-* to create groups, then use a querySelector to get all the options and test if they are apart of the group or not. If they are apart of the group show them otherwise hide them.
// The main group
let groups = document.querySelector('select[name=group]')
// Add a change event
groups.addEventListener('change', (e) => {
// Get the currently selected Group
let current = e.target.options[e.target.selectedIndex]
// Get the data-group number
let group = current.getAttribute('data-group')
// Get all the items from the second dropdown
let opts = Array.from(document.querySelectorAll('select[name=alph]>option'))
// Hide items that are not appart of the group
opts.forEach(itm => itm.style.display = itm.getAttribute('data-group') == group || !itm.getAttribute('data-group') ? 'initial' : 'none')
// Reset the the selection
document.querySelector('select[name=alph]').selectedIndex = 0
})
/* Hide option two items by default */
select[name=alph]>option[data-group]{display:none;}
<select name="group">
<option>Select One...</option>
<option data-group="1" value="Angry (Two)">Angry (Two)</option>
<option data-group="2" value="Happy (Two)">Happy (Two)</option>
<option data-group="3" value="Sad">Sad</option>
<option data-group="4" value="Tired (One)">Tired (One)</option>
</select>
<select name="alph">
<option>Select One...</option>
<option data-group="1" value="ABC">ABC</option>
<option data-group="1" value="ABC-1">ABC-1</option>
<option data-group="2" value="ABC-2">ABC-2</option>
<option data-group="2" value="DEF">DEF</option>
<option data-group="3" value="DEF-1">DEF-1</option>
<option data-group="3" value="DEF-2">DEF-2</option>
<option data-group="4" value="DEF-3">DEF-3</option>
</select>
I want to always maintain how to select the second option for its drop downs. The point here is that the value is random:
MyBrowser.document.getElementById("multipleCat_1").Value = "RANDOMVALUE"
How do I select the second option in a drop down menu?
HTML:
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>
You can use selectedIndex as below:
document.querySelectorAll('#multipleCat_1 > option')[1].value = 'Got you!';
document.getElementById('multipleCat_1').selectedIndex = 1
console.log(document.getElementById('multipleCat_1').value)
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>
<select id="multipleCat_1">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
var options = document.querySelectorAll('#multipleCat_1 > option');
document.getElementById('multipleCat_1').value = options[1].value;