Main Tutorials

JavaScript – Get selected value from dropdown list

A JavaScript example to show you how to get the selected value or text from a dropdown list.

A drop box list.


	<select id="country">
		<option value="None">-- Select --</option>
		<option value="ID001">China</option>
		<option value="ID002" selected>United State</option>
		<option value="ID003">Malaysia</option>
	</select>

Get option value :


	var e = document.getElementById("country");
	var result = e.options[e.selectedIndex].value;
	alert(result); //ID002

Get option text :


	var e = document.getElementById("country");
	var result = e.options[e.selectedIndex].text;
	alert(result); //United State

JavaScript Dropdown


<!DOCTYPE html>
<html>
	<head>
		<title>JavaScript - Get selected value from dropdown list</title>
	</head>

	<body>

		<h1>JavaScript - Get selected value from dropdown list</h1>

		<p id="result">United State</p>
		
		<select id="country">
			<option value="None">-- Select --</option>
			<option value="ID001">China</option>
			<option value="ID002" selected>United State</option>
			<option value="ID003">Malaysia</option>
		</select>

		<script>

			function GetSelectedValue(){
				var e = document.getElementById("country");
				var result = e.options[e.selectedIndex].value;
				
				document.getElementById("result").innerHTML = result;
			}

			function GetSelectedText(){
				var e = document.getElementById("country");
				var result = e.options[e.selectedIndex].text;
				
				document.getElementById("result").innerHTML = result;
			}
			
		</script>

		<br/>
		<br/>
		<button type="button" onclick="GetSelectedValue()">Get Selected Value</button>

		<button type="button" onclick="GetSelectedText()">Get Selected Text</button>
	</body>

</html>

Demo

References

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
10 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Haseena
4 years ago

Hi, want to get the value from the dropdown without alert and submit.,

krishna
3 years ago

how to get radio button value in input value attribute to submit form

Ency
2 years ago

running this code is only return the option on index 0, has anyone has had the same problem.

Florian
2 years ago

thank you very much! Very helpful!

marc
3 years ago

bad, doesn’t work

Ansari Hamid Raja Gulam
3 years ago

How this code will run on js Bin

Kristian Koski
4 years ago

Thank you so much for working code! Easy to customize!

wasim
4 years ago

Hi What if there are two drop downs with same id ???
How can we access value from both of them ??

Aldenys
4 years ago
Reply to  wasim

The Id shuold be unique, it’s a bad practice to have the same id in diferents tags.

Victor
3 years ago

How do I populate the value option value from mysql db using a Php array