Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to reset selected value to default using jQuery?
While creating the web page, developers may require to reset the selected option for the dropdown menu. For example, we added the dropdown menu in the form allowing users to select any option. Once users submit the form, we require to reset the dropdown menu options using JavaScript or Jquery.
In this tutorial, we will learn different approaches to resetting the selected value of the dropdown menu to default using Jquery.
Using the prop() method
The first approach uses the prop() method of Jquery. It allows us to reset the value of any property. Here, we can reset the value of the ‘selected’ to reset the selected value of the dropdown to default.
Syntax
Users can follow the syntax below to use the prop() method to reset the selected value to default using Jquery.
$("#id option").prop("selected", function () {
return this.defaultSelected;
});
The prop() method in the above syntax takes the ‘selected’ property name as a first parameter and the callback function as a second parameter. The callback function returns the ‘defaultSelected’ value, which will be set as a value of the ‘selected’ property.
Example 1
In the example below, we created the dropdown menu and assigned the ‘mySelect’ id. In the reset() function, we access the dropdown menu and execute the prop() method by passing the property and its value as a parameter.
When users click the button in the output, it executes the reset() function and reset the selected value of the dropdown.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3> Using the <i> prop() method and selected property </i> to reset the selected value to default in the dropdown menu using jQuery </h3>
<p> Select any other value in the dropdown and click the button to reset it to default. </p>
<select id = "mySelect">
<option value = "1"> One </option>
<option value = "2"> Two </option>
<option value = "3" selected> Three </option>
<option value = "4"> Four </option>
</select>
<button onclick = "reset()"> Reset dropdown options </button>
<script>
function reset() {
$("#mySelect option").prop("selected", function () {
// return defaultSelected property of the option
return this.defaultSelected;
});
}
</script>
</html>
Example 2
In the example below, we used the prop() method to change the value of the ‘selectedIndex’ property. It takes zero-based number values.
Here, we have created a dropdown menu containing different car brands, and the third option is selected by default. In the reset() function, we change the value of the ‘selectedIndex’ property to 2 to reset the selected value of the dropdown to the default value.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3> Using the <i> prop() method and selectedIndex property </i> to reset selected value to default in dropdown menu using jQuery </h3>
<p> Select any other value in the dropdown and click the button to reset it to default. </p>
<select id = "cars">
<option value="volvo">Volvo</option>
<option value = "saab"> Saab </option>
<option selected value = "mercedes"> Mercedes </option>
<option value = "audi"> Audi </option>
<option value = "bmw"> BMW </option>
<option value = "toyota"> Toyota </option>
</select>
<button onclick = "reset()"> Reset dropdown options </button>
<script>
function reset() {
$("#cars").prop('selectedIndex', 2);
}
</script>
</html>
Using the each() method
In this approach, we use each() method to iterate through all select menu options. After that, we check if the current option is default selected and change the value of its ‘selected’ property to true. Otherwise, we set false.
Syntax
Users can follow the syntax below to use each() method to reset the value of the select menu to default.
$("#id option").each(function () {
if (this.defaultSelected) {
this.selected = true;
}
});
In the above syntax, we use the ‘defaultSelected’ property of the current option to check whether the current option is pre-selected. If yes, we set true for the ‘selected’ property of the current option.
Example
In the example below, we created the select menu for fruits. In the reset() function, we use each() method to find the selected option from all options. If the current option is selected by default, we select it again and return it from the function. Otherwise, we set false for the ‘selected’ property of the current option.
In the output, users can change the option value in the dropdown menu and click the reset button to select the default option value.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h3> Using the <i> each() method </i> to reset selected value to default in dropdown menu using jQuery </h3>
<p> Select any other value in the dropdown and click the button to reset it to default. </p>
<select id = "fruits">
<option value = "apple"> Apple </option>
<option selected value = "banana"> Banana </option>
<option value = "orange"> Orange </option>
<option value = "grapes"> Grapes </option>
<option value = "mango"> Mango </option>
<option value = "pineapple"> Pineapple </option>
<option value = "watermelon"> Watermelon </option>
</select>
<button onclick = "reset()"> Reset dropdown options </button>
<script>
function reset() {
// iterate through each option in the dropdown menu
$("#fruits option").each(function () {
// check if the option is the default; if yes, then set selected to true
if (this.defaultSelected) {
this.selected = true;
return;
}
else {
this.selected = false;
}
});
}
</script>
</html>
We used the prop() and each() method to reset the selected value to default in the select dropdown menu. However, both approach uses the ‘defaultSelected’ property of the option to check whether the option is pre-selected, and based on that, we select the option again.
10K+ Views
