We Keep Coding

How do I best access the value attribute of the DOM-Element with jquery?

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)

creating a variable with a value of a drop down selection input (javascript)

I've had a hard time finding a similar question for this, and its probably simple but just slipping my mind.
I've got a drop down menu, you make your selection and submit it, it jumps to 2ndpage.html?location=locationName
I'm trying to create a variable with a value of the "locationName" to use in a link that would use that value as a string like "www.locationName.com",
i've tried using something like
var locationName = getElementById("location").value;
and other similar ways but the variable seems to keep coming up undefined. And this seems to be the only thing stopping me from finishing my project, lol.
Thanks in advance.

You would find the value and text by accessing this.selectedIndex of the selection list. Use http:// for absolute link to a page.
<select id="locations">
<option value="http://www.google.com">Location 1</option>
<option value="http://www.loogle.com" selected="selected">Location 2</option>
<option value="http://www.foogle.com">Location 3</option>
</select>
var e = document.getElementById("locations");
e.addEventListener('change', function (){
var locationValue = this.options[this.selectedIndex].value;//www.loogle.com
var locationText = this.options[this.selectedIndex].text;//Location 2
window.location = locationValue;
});

Try this:
<p>Location: </p>
<select id="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementById("location").value;
</script>
Or try this:
<p>Location: </p>
<select name="location">
<option value="location1">location 1</option>
<option value="location2">location 2</option>
<option value="location3">location 3</option>
</select>
<script>
var locationName = document.getElementsByName("location")[0].value;
</script>

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

Select has an empty value

I`ve a "select":
<select class="date-select2" name="date">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
When I`m try to get value of select,
document.getElementsByClassName('date-select2')[0].value
it normally returns a value of selected item in Chrome. In FF and Safari sometimes it returns an empty string, when selected a numeric value(not "All").
How to deal with it?

I think this might help you:
HTML
<select class="date-select2" name="date" onchange="myFunction(this.value)">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
JavaScript
function myFunction(curValue) {
alert(curValue);
}
Working : Fiddle
Note: Also remember to put your JavaScript code inside body also right before it ends.

var select = document.querySelector('select.date-select2');
// add onchange handler
select.onchange = function(){
var idx = select.selectedIndex;
var val = select.options[idx].value;
// if All is selected use text of option
if(val=="")
val = select.options[idx].textContent;
};

You can try this way to get selected item:
$(".date-select2 option:selected").text();

Add value to a drop down menu with a form

Is there a way to insert values in a drop down menu with a simple form? I have this drop down menu
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>
Should I use an array? I been searching the net but couldn't find anything that would help.

Here is a JavaScript solution to add items to a drop down.
The HTML to use..
<form>
<select id="categories" name="users" onchange="showUser(this.value)">
<option value="">Select a category:</option>
<option value="movie">Movie</option>
<option value="musik">Musik</option>
<option value="books">Books</option>
<option value="images">Images</option>
</select>
</form>​​
JavaScript code...
var categories = document.getElementById("categories");
var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');
categories.appendChild(newOption);
​
jQuery code... (a lot shorter)
$("#categories").append("<option value='newvalue'>New Value</option>");
Here is the JavaScript JSFiddle and the jQuery JSFiddle to play with!

You could look into jQuery append() and option() with click event...
I've just created a working solution for you.
Don't know if this is what you was looking for, but this is how it works:
You simply just write the value and visual option name into a form text field: value, text which gives you this:
<option value="value">text</option>
<select id="mySelect"></select>
<p> </p>
<input type="text" id="string"><br>
<button id="append">Append</button>
$('#append').click(function(){
var str = $('#string').val();
var substr = str.split(', ');
$('#mySelect').append( new Option(substr[0],substr[1]));
});
Here is a working version: http://jsfiddle.net/SCf8m/1/