Question 35673 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Reset selected value from dropdown using jQuery

I am trying to clear selected value on a button click using jQuery.

$("#cityCode")[0].selectedIndex = 0;

This is working fine for a single selector, but if I target multiple selectors like this

$("#cityCode, #townCode")[0].selectedIndex = 0;

It works only for first ID. Can anyone help me to write fix syntax?

To clear all selected options from dropdown on a button click.

Tags:

3

Answers


  1. 0

    As you’re selecting multiple elements you need to reset the selectedIndex on all of them, not the 0th element. To do that you can use an each() loop:

    $("#cityCode, #townCode").each((i, el) => el.selectedIndex = 0);

    Alternatively, if the first option in both dropdowns has an empty value, eg. <option value="">Please select</option>, then you can use the val() method which will implicitly loop for you:

    $("#cityCode, #townCode").val('');
    Login or Signup to reply.
  2. 0

    Try this:

      $("#cityCode, #townCode").each(function(){
                    $(this).selectedIndex = 0;
                });
    Login or Signup to reply.
  3. 0

    Use jQuery’s .prop() method:

    Set the selected option to 0 index

    This is considered bad practice since the defaultSelected might not necessarily be the option at index 0. Such depends on which option had originally the selected HTML attribute set (see the other example). This is only OK -ish if you don’t use such attribute on your Option elements.

    $("#cityCode, #townCode").prop("selectedIndex", 0);
    <select id="cityCode">
  <option>111</option>
  <option selected>222</option>
  <option>333</option>
</select>

<select id="townCode">
  <option>aaa</option>
  <option selected>bbb</option>
  <option>ccc</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

    In vanilla JavaScript:

    document.querySelectorAll("#cityCode, #townCode").forEach(elSelect => {
  elSelect.selectedIndex = 0;
});

    Reset option to original defaultSelected index

    Notice that the above sets specifically the index to 0 (first option element), which might not be the original defaultSelected.

    To account for this use:

    $("#cityCode").val("333"); // just to force emulate some dynamic change
$("#townCode").val("ccc");

$("#cityCode, #townCode").prop("selectedIndex", function() {
  const idx = [...this.options].findIndex((opt) => opt.defaultSelected);
  return idx < 0 ? 0 : idx;
});
    <select id="cityCode">
  <option>111</option>
  <option selected>222</option>
  <option>333</option>
</select>

<select id="townCode">
  <option>aaa</option>
  <option selected>bbb</option>
  <option>ccc</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

    Reset form

    If instead, you wish to reset the entire form use:

    $("#someForm")[0].reset();

    Don’t use .val("")

    as suggested in other answers… don’t use .val(""). Here’s why:

    $("#cityCode, #townCode").val("");
    <select id="cityCode">
  <option>111</option>
  <option selected>222</option>
  <option>333</option>
</select>

<select id="townCode">
  <option>aaa</option>
  <option selected>bbb</option>
  <option>ccc</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search