How to reset selected value to default using jQuery?

Last Updated : 05 Aug, 2024

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 reset the selected value of a dropdown to its initial default option, ensuring that the user interface remains intuitive and user-friendly. This guide will walk you through the steps to reset the selected value of a dropdown to its default using jQuery, making it a straightforward process for any web developer.

These are the following approaches:

Table of Content

Using prop() method

First select the options using jQuery selectors then use prop() method to get access to its properties. If the property is selected then return the default value by using defaultSelected property.

Example: This example shows the use of prop() method to reset the selected value to the default value.

html

<!DOCTYPE HTML> <html>  <head>     <title>         Reset select value to         default with JQuery     </title>      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script> </head>  <body style="text-align:center;">      <h1 style="color:green;">         GeeksForGeeks     </h1>      <p id="GFG_UP"></p>       <select id="select">         <option value="GFG_1">GFG_1</option>         <option value="GFG_2" selected="selected">             GFG_2         </option>         <option value="GFG_3">GFG_3</option>     </select>      <button onclick="GFG_Fun()">         Click Here     </button>      <p id="GFG_DOWN"></p>       <script>         let el_up = document.getElementById('GFG_UP');         let el_down = document.getElementById('GFG_DOWN');         el_up.innerHTML = "Select a different option "             + "and then click on the button to "             + "perform the operation";          function GFG_Fun() {             $('#select option').prop('selected', function () {                 return this.defaultSelected;             });             el_down.innerHTML = "Default selected";         }     </script> </body>  </html>

Output:

Using each() method

First, select the options using jQuery selectors then use each() method to get access to its properties. If the property is selected then return the default value by defaultSelected property.

Example: This example shows the use of each() method to reset the selected value to the default value.

html

<!DOCTYPE HTML> <html>  <head>     <title>         Reset select value to         default with JQuery     </title>      <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">     </script> </head>  <body style="text-align:center;">      <h1 style="color:green;">         GeeksForGeeks     </h1>      <p id="GFG_UP"></p>       <select id="select">         <option value="GFG_1">GFG_1</option>         <option value="GFG_2" selected="selected">             GFG_2         </option>         <option value="GFG_3">GFG_3</option>     </select>      <button onclick="GFG_Fun()">         Click Here     </button>      <p id="GFG_DOWN"></p>       <script>         let el_up = document.getElementById('GFG_UP');         let el_down = document.getElementById('GFG_DOWN');         el_up.innerHTML = "Select a different option "             + "and then click on the button to "             + "perform the operation";          function GFG_Fun() {             $('#select option').each(function () {                 if (this.defaultSelected) {                     this.selected = true;                     return false;                 }             });             el_down.innerHTML = "Default selected";         }     </script> </body>  </html>

Output:

How to change Selected Value of a Drop-Down List using jQuery?

PranchalKatiyar

Improve

Article Tags :

How to reset selected value to default using jQuery?

Using prop() method

Using each() method

Similar Reads