By using prop() method
You can also use the prop() method to change the value of a dropdown list. You can select the particular element using th element selector and use the selected property and set it to true.
Syntax:
$('element_selector').prop('selected', true);
Example: The below example uses the prop() method to change the value of the dropdown list:
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 option[value=1]").prop('selected', true); }); </ script > </ head > < body > < center > < 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 > </ center > </ 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