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 can be referenced from the options Array.
Finally, the selected Text and Value are fetched using the innerHTML and value property respectively.
Refer below example.
HTML
<html>
<head>
<meta charset="utf-8" />
<title></title>
</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 Text.
var selectedText = selectedOption.innerHTML;
// Referencing Selected Value.
var selectedValue = selectedOption.value;
alert("Selected Text: " + selectedText + "\nValue: " + selectedValue);
};
</script>
<input type="button" value="Submit" onclick="GetSelectedFruit()" />
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
