Drop-Down Lists in JavaScript
Dropdownlist contain a list of text which allows the website user to select from the options.
HTML Select options
Browser View
<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
Browser View
<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
Browser View
<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>
Related Topics
- JavaScript Popup Boxes
- Opening a new window in JavaScript
- How do I include a JavaScript file in another JavaScript file?
- Print the content of a Div using JavaScript/jQuery
- How to get the current URL using JavaScript ?
- How to Detect a Mobile Device with JavaScript/jQuery
- How to validate an email address in JavaScript
- JavaScript Array Iteration
- How to Remove a Specific Item from an Array in JavaScript
- What is JavaScript closures?
- How To Remove a Property from a JavaScript Object
- How to get selected value from Dropdown list in JavaScript
- How do I get the current date in JavaScript?
- How to Open URL in New Tab | JavaScript
- How to delay/wait/Sleep in code execution | JavaScript
- How to round to at most 2 decimal places | JavaScript
- How to convert string to boolean | JavaScript
- How to check undefined in JavaScript?
- How To Copy to Clipboard | JavaScript
- How to encode a URL using JavaScript?
- How to force Input field to enter numbers only | JavaScript
- How to create multiline string in JavaScript
- How to Check for an Empty String in JavaScript?