Hi makenzi.exc,
First reference the DropDown using document.querySelector.
Then find the index using the selectedIndex property.
Once the index is referenced, selected Option is referenced from the options Array.
Finally, the value is retrieved using the value property.
Refer below example.
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
Select Fruit:
<select id="ddlFruits" name="Fruit">
<option value=""></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
<option value="3">Orange</option>
</select>
<script type="text/javascript">
function GetSelectedFruit() {
// Referencing DropDownList.
var ddlFruits = document.querySelector('#ddlFruits');
// Referencing Selected Index.
var selectedIndex = ddlFruits.selectedIndex;
// Referencing Selected Option.
var selectedOption = ddlFruits.options[selectedIndex];
// Referencing Selected Value.
var selectedValue = selectedOption.value;
alert("Selected Value: " + selectedValue);
};
</script>
<input type="button" value="Submit" onclick="GetSelectedFruit()" />
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
