Drop-Down Lists in JavaScript

Dropdownlist contain a list of text which allows the website user to select from the options.

HTML Select options

run this source code Browser View
Source
<html> <body> <select id="days"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> </select> </body> </html>

Get the selected value using JavaScript

run this source code Browser View


Source
<html> <head> <script> function getDay() { var eID = document.getElementById("days"); var dayVal = eID.options[eID.selectedIndex].value; var daytxt = eID.options[eID.selectedIndex].text; alert("Selected Day is " + daytxt + ", Value " + dayVal); } </script> </head> <body> <select id="days"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> </select> <br><br> <button onclick="getDay()">Select Day</button> </body> </html>

JavaScript onchange event

run this source code Browser View
Source
<html> <head> <script> function getDay() { var eID = document.getElementById("days"); var dayVal = eID.options[eID.selectedIndex].value; var daytxt = eID.options[eID.selectedIndex].text; alert("Selected Day is " + daytxt + ", Value " + dayVal); } </script> </head> <body> <select id="days" onchange="getDay()">> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> </select> </body> </html>