How to change Selected Value of a Drop-Down List using jQuery?
Last Updated :
11 Jul, 2025
We will 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.
Below are the methods to change the selected value of a dropdown list using jQuery:
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">GeeksforGeeks 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:
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">GeeksforGeeks 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:
By using the attr() method
The attr() method can also be used to change the value of the dropdown list. You have to select the element and use the attr() method with selected attribute and set it to true to replace the value of dropdown with the selected value of the selected element.
Syntax:
$('selected_element').attr('selected', true)Example: This example uses attr() function to assign the selected attribute to the corresponding option.
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=3]").attr('selected', true);
});
</script>
</head>
<body>
<div>
<p id="gfg">GeeksforGeeks 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:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
How to change selected value of a drop-down list using jQuery?
Similar Reads
How to get selected text from a drop-down list using jQuery? In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method
2 min read
How to add options to a drop-down list using jQuery? Given an HTML document with a drop-down list menu and our task is to add more options to the drop-down list using jQuery. Approach : To add more option to the existing drop-down list using the append() method : var options = { val1: 'C#', val2: 'PHP' }; var selectOption = $('#programmingLanguage');
2 min read
How to reset selected value to default using jQuery? Resetting a selected value to its default in a dropdown or select element is a common requirement in web development to enhance user experience. jQuery, a popular JavaScript library, simplifies this task by providing easy-to-use methods for manipulating DOM elements. By using jQuery, you can quickly
3 min read
How to Get Selected Value in Dropdown List using JavaScript? A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript.Basic HTML Structure for
2 min read
How to Change Options of <select> with jQuery ? In this article, we will see how we can change options of <select> with the help of jQuery. Here we have options in the select tag and we want to change it dynamically when the user clicks a button. PrerequisitesHTMLCSSJavaScriptjQuerySyntax$("#op4").empty().append(text)ApproachCreate a card s
2 min read
How to get text value of a selected option in jQuery ? Introduction: In this article, we will see how we can use jQuery to get the text value from the selected option. While working on some form-related user interface, we often use the select option, and to use that, we will surely need those values that are being selected. Approach: We will use select
2 min read