By using the val() method
The val() method can be used by specifying a value attribute with some default values inside the option tags of the select element. Once you set the value attribute, you can now pass the value of the particular element that you want to replace with the default shown value as a parameter to the val() method in the form of a string.
Syntax:
$('element_selector').val('value');
Example: This example uses val() function to set the option corresponding to the passed value.
html
<!DOCTYPE html> <html> <head> <title> Change selected value of a drop-down list </title> <style> div { width:15%; background-color:green; padding:8px; color:azure; } </style> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(()=>{ $("#select").val('2'); }); </script> </head> <body> <div> <p id="gfg">w3wiki courses:</p> <select id="select"> <option value="0">System Design</option> <option value="1">DSA-Online</option> <option value="2">Fork Python</option> <option value="3">Fork Java</option> </select> </div> </body> </html> |
Output:
How to change selected value of a drop-down list using jQuery?
In this article, we are going to change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list.
To achieve this feature you can use different methods, some of those methods are listed below:
Table of Content
- By using the val() method
- By using prop() method
- By using the attr() method