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