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.
About Dikshita
