Here is the demo on how we can get selected keys and values from a drop-down box.
A select box:
<select id = "country">
<option value="">-- Select --</option>
<option value="value1" selected>India</option>
<option value="value2">United State</option>
<option value="value3">Malaysia</option>
</select>
Get selected option texts:
var e = document.getElementById("country");
var result = e.options[e.selectedIndex].text;
document.getElementById("result").innerHTML = result;
Get selected the values:
var e = document.getElementById("country");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
Full code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - Get selected values from dropdown select box</title>
</head>
<body>
<h1>JavaScript - Get selected values from dropdown select box</h1>
<p id="result"></p>
<select id = "country">
<option value="">-- Select --</option>
<option value="value1" selected>India</option>
<option value="value2">United State</option>
<option value="value3">Malaysia</option>
</select>
<script>
function GetSelectedValues(){
var e = document.getElementById("country");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
function GetSelectedTexts(){
var e = document.getElementById("country");
var result = e.options[e.selectedIndex].text;
document.getElementById("result").innerHTML = result;
}
</script>
<br/>
<br/>
<button type="button" onclick="GetSelectedValues()">Get Selected Values</button>
<button type="button" onclick="GetSelectedTexts()">Get Selected Text/Keys</button>
</body>
</html>
Demo: