Set Selected Value Of Dropdown In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of set selected value of dropdown in JavaScript, the value of a choose box element is set using JavaScript's selectedIndex attribute. The selected value's index in a drop-down list is set or returned by the selectedIndex property.
jQuery may be used to retrieve the drop-down list's selected values.
We first need jQuery, a jQuery selector, and or a jQuery val () method in order to understand this post.
After that, several examples will be utilized to clarify this topic for us.
With choose and option tags, you may create drop-down menus. All of the options in a drop-down list are visible when a user selects one, even when they are not visible on the screen.
They are used to save space when displaying only one item in the list.
The various attributes of the <select> tag include:
Multiple: It's employed to enable the <select> tag to support a variety of selections. By default, it can accept just one user-selected choice. The user must select options while simultaneously pressing the mouse button.
Name: It serves to identify the pull-down list.
The several characteristics used with the <option> tag include the following:
Value: It acts as a stand-in for the value entered during form submission. If the value property is missing, the text first from option tag's title is used instead.
When a form first loads in a browser, the word "Selected" is used to denote the choice that has since been made.
Step By Step Guide On Set Selected Value Of Dropdown In JavaScript :-
<html>
<body>
<h1 style="color: green;">
TalkersCode
</h1>
<select id="mySelect">
<option>football</option>
<option>Basketball</option>
</select>
<p>
Click the button to select the
option element with index "2".
</p>
<button onclick="myFunction()">
click me
</button>
<script>
function myFunction() {
document.getElementById(
"mySelect").selectedIndex = "2";
}
</script>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a dropdown using select and option.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Then we close program using </script></body></html>
Conclusion :-
Pull-down lists are made utilizing the "select" element rather than the "input" tag. An opening tag "select" appears in the paired tag even before closing tag "/select".
This tag cannot be used without the <option> tag.
I hope this article on set selected value of dropdown in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
