jQuery: How to use jQuery to reset select menus and text fields

/ Chris Nielsen

jQuery is a powerful tool in that it allows us to select any DOM element and perform some action on it. In this example, I will show how to use jQuery to select IDs from select menus and a text field and reset them when clicking a div.

 

Example 1 – Resetting selected

This example shows how to reset a select menu to the default ‘selected’ option. Note that the selected option can be anywhere in the list of options, it doesn’t have to be the first option in the list. I won’t show the CSS, but it will be visible in the embedded codepen.

HTML

<div class="container">
  <h2 class="light-blue">Example 1 - Resetting selected</h2>
  <select id="fruitSelect">
      <option value="a" selected>apple</option>
      <option value="b">banana</option>
      <option value="c">cherry</option>
      <option value="d">date</option>
  </select>
  <div id="reset1" class="reset" style="cursor: pointer;">Reset Menu</div>
</div>

jQuery

$("#reset1").on("click", function () {
    $('#fruitSelect option').prop('selected', function() {
        return this.defaultSelected;
    });
});

 

Example 2 – Resetting to the first option

Notice the jQuery changes selectedIndex to index 0:

HTML

<div class="container">
  <h2 class="green">Example 2 - Resetting to the first option</h2>
  <select id="stateSelect">
      <option >Select a state you lived in</option>
      <option >California</option>
      <option >Oregon</option>
      <option >Florida</option>
      <option >North Dakota</option>
  </select>
  <div id="reset2" class="reset" style="cursor: pointer;">Reset Menu</div>
</div>

jQuery

$("#reset2").on("click", function () {
 $('#stateSelect').prop('selectedIndex', 0);
});

 

Example 3 – Resetting a text field

Notice the jQuery replaces the text using .val("").

HTML

<div class="container">
   <h2 class="orange">Example 3 - Resetting a text field</h2>
   <input type="text" size=30 value="I typed some text here!" id="textInput">
   <br><br>
   <div id="reset3" class="reset" style="cursor: pointer;">Clear Text Field</div>
</div>

jQuery

$("#reset3").on("click", function () {
 $('#textInput').val("");
});

 

Example 4 – Resetting all fields with one click

 

$("#reset4").on("click", function () {
    let selectMenus = ['fruitSelect', 'stateSelect'];
    let textFields = ['textInput'];
    for(i = 0; i < selectMenus.length; i++) {
      $('#' + selectMenus[i]).prop('selectedIndex', 0);
    }
    for(j = 0; j < textFields.length; j++) {
      $('#' + textFields[j]).val("");
    }
});

Here are the examples, with full CSS in codepen: 

See the Pen How to use jQuery to reset select menus and text fields by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

For more information about these jQuery features, see:
https://www.w3schools.com/jsref/prop_select_selectedindex.asp
http://api.jquery.com/?s=selectedIndex
http://api.jquery.com/prop/
https://www.w3schools.com/jquery/html_prop.asp
http://api.jquery.com/val/
https://www.w3schools.com/jquery/html_val.asp