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.

   


   
 Using the  prop() method and selected property  to reset the selected value to default in the dropdown menu using jQuery 
   
 Select any other value in the dropdown and click the button to reset it to default. 
   
       One 
       Two 
       Three 
       Four 
   
    Reset dropdown options 
   

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.

   


   
 Using the  prop() method and selectedIndex property  to reset selected value to default in dropdown menu using jQuery 
   
 Select any other value in the dropdown and click the button to reset it to default. 
   
      Volvo
       Saab 
       Mercedes 
       Audi 
       BMW 
       Toyota 
   
    Reset dropdown options 
   

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.

   


   
 Using the  each() method  to reset selected value to default in dropdown menu using jQuery  
   
 Select any other value in the dropdown and click the button to reset it to default. 
   
       Apple 
       Banana 
       Orange 
       Grapes 
       Mango 
       Pineapple 
       Watermelon 
   
    Reset dropdown options 
   

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.