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 the Author

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

Comments

avatar