JavaScript Set Selected Option By Index
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of JavaScript set selected option by index, an option's index in a dropdown list is displayed by JavaScript's selectedIndex property.
A JavaScript call selectedIndex on the element identifies the option in the dropdown list that has been selected.
This is done by getting the index of the selected option in the element using the id of the dropdown list.
User interface utility relies heavily on dropdown lists. An option or a combination of options are presented to the user for selection.
A user takes the appropriate action based on their responses to these dropdown lists.
When a user has several options, and he or she needs to choose one or more, a dropdown list can be useful.
Object models for dropdown lists in JavaScript have this property. HTML documents contain option indexes in drop-down lists.
This works around the problem where selectedIndex returns only the first index of the selected options in the multi-select dropdown list.
To enable multiple selections in dropdown lists, we use the for-... loop on the options property of the corresponding JavaScript dropdown list object.
A true or false value is checked for each option's selected attribute.
Step By Step Guide On JavaScript Set Selected Option By Index :-
<!DOCTYPE html>
<html>
<body>
<p> set selected option by index in Javascript </p><br>
<form id="myForm">
<select id="selectNow">
<option>Windows 11</option>
<option>Windows 10</option>
<option>Windows 8</option>
</select>
<input type="button" onclick="display()" value="Submit !">
</form>
<p>TalkersCode select and click the button to get the index of the selected option<br></p>
<div id="result"></div>
<script>
function display() {
var index = document.getElementById("selectNow").selectedIndex;
document.getElementById("result").innerHTML = "The selected index is :" + index;
}
</script>
</body>
</html>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- This is followed by the <body> tag that defines the body of the webpage. This is where all the content for the website is written.
- Then we create a paragraph using the p tag.
- Then we use form id to create a form and select an object to select values.
- Then we close the select and close form.
- Then we can be added to an HTML page with a <script> tag.
- We can then create a document to select an element by its ID by using the get element by id procedure.
- After that </script></body></html> and code should be executed after closing all tags.
Conclusion :-
To take in input from the user and then provide a suitable response, the selected index property of the document object is very helpful.
I hope this article on JavaScript set selected option by index helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
