jQuery Set Selected Option By Value
Last Updated : Jul 1, 2023
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of jQuery set selected option by value, one line of code may easily be written using jQuery to modify a selected value from just a drop-down list.
Assume you need to choose one of a select element's alternatives based on a single of its values.
There are many ways to accomplish this accomplishment two of them are described below.
Used Purpose:
- The val() function returns the specified elements' value attributes.
- Attributes & values of the chosen elements are set or returned by the attr() function.
To locate the value of the selected item in a pick box or dropdown list, combine the val() function and the jQuery:selected selection.
A text content of a <option> element would be utilized as either a value instead if value for with an option also isn't expressly defined, as shown.
Step By Step Guide On jQuery Set Selected Option By Value :-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery get selected option</title> <style> div { color: red; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <select id="select_id" name="actors"> <option>Test</option> <option selected="selected">Java</option> <option>Python</option> <option>Ruby</option> <option>PHP</option> <option>Jquery</option> </select> <div id="location"></div> <script> $('#select_id').on('change', function() { $('#location').text(this.value); }); </script> </body> </html>
- First, we need to write <HTML>, which tells the browser what version of HTML we're using. An HTML document begins with a tag.
- You should use the <head> tag to describe the project's heading. While the final brackets are closed, both the title and the final brackets are open. A webpage's URL or path determines the appearance of external style sheets, also called step-by-step style sheets.
- The next step is to create the font size and weight.
- After that, we close the style.
- 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.
- Closing the script completes the process.
- 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 select and option function.
- Then again we open the <script> tag and then add. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- After that we close </script></body></html>
Conclusion :-
The attribute that was selected is a boolean one. When specified, it tells the browser to pre-select a choice before the page loads.
The drop-down list's first item to appear is the pre-selected choice.
By combining the id, name, class, and tag of particular html elements with the jQuery change() method, you may set the selected value of a dropdown menu in jQuery.
I hope this article on jQuery set selected option by value helps you and the steps and method mentioned above are easy to follow and implement.