How do I get the selected value from a dropdown list using JavaScript?
I tried the methods below, but they all return the selected index instead of the value:
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;This question is related to
javascript
html-select
The answer is
Try
ddlViewBy.value // value
ddlViewBy.selectedOptions[0].text // label
console.log( ddlViewBy.value );_x000D_
_x000D_
console.log( ddlViewBy.selectedOptions[0].text );<select id="ddlViewBy">_x000D_
<option value="1">Happy</option>_x000D_
<option value="2">Tree</option>_x000D_
<option value="3" selected="selected">Friends</option>_x000D_
</select>Here's an easy way to do it in an onchange function:
event.target.options[event.target.selectedIndex].dataset.name
The previous answers still leave room for improvement because of the possibilities, the intuitiveness of the code, and the use of id versus name. One can get a read-out of three data of a selected option -- its index number, its value and its text. This simple, cross-browser code does all three:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
</head>
<body>
<form name="demoForm">
<select name="demoSelect" onchange="showData()">
<option value="zilch">Select:</option>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
</select>
</form>
<p id="firstP"> </p>
<p id="secondP"> </p>
<p id="thirdP"> </p>
<script>
function showData() {
var theSelect = demoForm.demoSelect;
var firstP = document.getElementById('firstP');
var secondP = document.getElementById('secondP');
var thirdP = document.getElementById('thirdP');
firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
}
</script>
</body>
</html>
Live demo: http://jsbin.com/jiwena/1/edit?html,output .
id should be used for make-up purposes. For functional form purposes, name is still valid, also in HTML5, and should still be used. Lastly, mind the use of square versus round brackets in certain places. As was explained before, only (older versions of) Internet Explorer will accept round ones in all places.
var selectedValue = document.getElementById("ddlViewBy").value;
I think you can attach an event listener to the select tag itself e.g:
<script>
document.addEventListener("DOMContentLoaded", (_) => {
document.querySelector("select").addEventListener("change", (e) => {
console.log(e.target.value);
});
});
</script>
In this scenario, you should make sure you have a value attribute for all of your options, and they are not null.
The following code exhibits various examples related to getting/putting of values from input/select fields using JavaScript.
Working Javascript & jQuery Demo
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt" placeholder="Write Something !" onkeyup="up()">
The following script is getting the value of the selected option and putting it in text box 1
<script>
function run() {
document.getElementById("srt").value = document.getElementById("Ultra").value;
}
</script>
The following script is getting a value from a text box 2 and alerting with its value
<script>
function up() {
//if (document.getElementById("srt").value != "") {
var dop = document.getElementById("srt").value;
//}
alert(dop);
}
</script>
The following script is calling a function from a function
<script>
function up() {
var dop = document.getElementById("srt").value;
pop(dop); // Calling function pop
}
function pop(val) {
alert(val);
}?
</script>
You can use querySelector.
E.g.
var myElement = document.getElementById('ddlViewBy');
var myValue = myElement.querySelector('[selected]').value;
You should be using querySelector to achieve this. This also standardize the way of getting value from form elements.
var dropDownValue = document.querySelector('#ddlViewBy').value;
Fiddle: https://jsfiddle.net/3t80pubr/
Just do: document.getElementById('idselect').options.selectedIndex
Then you i'll get select index value, starting in 0.
The simplest way to do this is:
var value = document.getElementById("selectId").value;
Another solution is:
document.getElementById('elementId').selectedOptions[0].value
I have a bit different view of how to achieve this. I'm usually doing this with the following approach (it is an easier way and works with every browser as far as I know):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>
Plain JavaScript:
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
jQuery:
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option
AngularJS: (http://jsfiddle.net/qk5wwyct):
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>
// JavaScript
$scope.items = [{
value: 'item_1_id',
text: 'Item 1'
}, {
value: 'item_2_id',
text: 'Item 2'
}];
<select id="Ultra" onchange="alert(this.value)">
<option value="0">Select</option>
<option value="8">text1</option>
<option value="5">text2</option>
<option value="4">text3</option>
</select>
Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the dom tree and then locating this element inside the form.
There are two ways to get this done either using JavaScript or jQuery.
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'
In 2015, in Firefox, the following also works.
e.options.selectedIndex
In more modern browsers, querySelector allows us to retrieve the selected option in one statement, using the :checked pseudo-class. From the selected option, we can gather whatever information we need:
const opt = document.querySelector('#ddlViewBy option:checked');_x000D_
// opt is now the selected option, so_x000D_
console.log(opt.value, 'is the selected value');_x000D_
console.log(opt.text, "is the selected option's text");<select id="ddlViewBy">_x000D_
<option value="1">test1</option>_x000D_
<option value="2" selected="selected">test2</option>_x000D_
<option value="3">test3</option>_x000D_
</select>var strUser = e.options[e.selectedIndex].value;
This is correct and should give you the value. Is it the text you're after?
var strUser = e.options[e.selectedIndex].text;
So you're clear on the terminology:
<select>
<option value="hello">Hello World</option>
</select>
This option has:
- Index = 0
- Value = hello
- Text = Hello World
To go along with the previous answers, this is how I do it as a one-liner. This is for getting the actual text of the selected option. There are good examples for getting the index number already. (And for the text, I just wanted to show this way)
let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text
In some rare instances you may need to use parentheses, but this would be very rare.
let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;
I doubt this processes any faster than the two line version. I simply like to consolidate my code as much as possible.
Unfortunately this still fetches the element twice, which is not ideal. A method that only grabs the element once would be more useful, but I have not figured that out yet, in regards to doing this with one line of code.
Beginners are likely to want to access values from a select with the NAME attribute rather than ID attribute. We know all form elements need names, even before they get ids.
So, I'm adding the getElementsByName() solution just for new developers to see too.
NB. names for form elements will need to be unique for your form to be usable once posted, but the DOM can allow a name be shared by more than one element. For that reason consider adding IDs to forms if you can, or be explicit with form element names my_nth_select_named_x and my_nth_text_input_named_y.
Example using getElementsByName:
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;
Using jQuery:
$('select').val();
Make a drop-down menu with several options (As many as you want!)
<select>
<option value="giveItAName">Give it a name
<option value="bananaShark">Ridiculous animal
<ooption value="Unknown">Give more options!
</select>
I made a bit hilarious. Here's the code snippet:
<select>_x000D_
<option value="RidiculousObject">Banana Shark_x000D_
<option value="SuperDuperCoding">select tag and option tag!_x000D_
<option value="Unknown">Add more tags to add more options!_x000D_
</select>_x000D_
<h1>Only 1 option (Useless)</h1>_x000D_
<select>_x000D_
<option value="Single">Single Option_x000D_
</select> yay the snippet worked
Here is a JavaScript code line:
var x = document.form1.list.value;
Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".
Running example of how it works:
var e = document.getElementById("ddlViewBy");_x000D_
var val1 = e.options[e.selectedIndex].value;_x000D_
var txt = e.options[e.selectedIndex].text;_x000D_
_x000D_
document.write("<br />Selected option Value: "+ val1);_x000D_
document.write("<br />Selected option Text: "+ txt);<select id="ddlViewBy">_x000D_
<option value="1">test1</option>_x000D_
<option value="2">test2</option>_x000D_
<option value="3" selected="selected">test3</option>_x000D_
</select>Note: The values don't change as the dropdown is changed, if you require that functionality then an onClick change is to be implemented.
Just use
$('#SelectBoxId option:selected').text();for getting the text as listed$('#SelectBoxId').val();for getting the selected index value
I don't know if I'm the one that doesn't get the question right, but this just worked for me: Using an onchange() event in your html, eg.
<select id="numberToSelect" onchange="selectNum">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
//javascript
function sele(){
var strUser = numberToSelect.value;
}
This will give you whatever value is on the select dropdown per click
If you ever run across code written purely for Internet Explorer you might see this:
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;
Running the above in Firefox et al will give you an 'is not a function' error, because Internet Explorer allows you to get away with using () instead of []:
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
The correct way is to use square brackets.
Source: Stackoverflow.com