Reset Select Value to Default

Reset select value to default

You can make use of the defaultSelected property of an option element:

Contains the initial value of the selected HTML attribute, indicating whether the option is selected by default or not.

So, the DOM interface already keeps track which option was selected initially.

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

DEMO

This would even work for multi-select elements.

If you don't want to iterate over all options, but "break" after you found the originally selected one, you can use .each instead:

$('#my_select option').each(function () {
    if (this.defaultSelected) {
        this.selected = true;
        return false;
    }
});

---

Without jQuery:

var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
    options[i].selected = options[i].defaultSelected;
}

HTML reset dropdown select menu to default value

Once option selected, .select-options is hidden by .next('ul.select-options').hide();

You need to show it again on .resetbtn click

$('.resetbtn').click(function() {
    $('.select-styled').html("<a>choose a number</a>");
});

Reset Select Menu to default in the on change event

If you're just trying to reset the select element back to a default value, there's a couple ways to do it. Here's is one way that will work:

https://jsfiddle.net/mswilson4040/gnLkyexa/5/

<select placeholder="Select a value..." id="new-effect">
  <option selected value="add" class="default-selection">Add New Effect</option>
  <option value="waves">Waves</option>
  <option value="spiral">Spiral</option>
</select>

const defaultOption = $('#new-effect').find('.default-selection');
$('#new-effect').change(e => {
  const value = $('#new-effect').val();
  console.log(value);
  $('#new-effect').val(defaultOption.val());
});

Basically, you need to capture the default value that you want to reset everytime. Once you have that, in your change event, obtain the selected value and do what you need to with it. After that is done, you can then just set the select dropdown back to the value you need it to.

The selected attribute in the HTML is fine to have for the initial render, but that will go away once someone changes the value (which is why you can't rely on it for everything).

how to reset values of select dropdown

If I understood correctly, you want change the selected option back to default one. To do so, you can do the following:

document.getElementById('books').selectedIndex = 0;

This is just a basic example, where the selected option is switched back to the first one. To do somewhat more advance reset, you could add data-default-index attribute to the rendered select and use that value to reset it back. This way you could use a non-first element as a default one.

Cheers.

Reset the Value of a Select Box

I presume you only want to reset a single element. Resetting an entire form is simple: call its reset method.

The easiest way to "reset" a select element is to set its selectedIndex property to the default value. If you know that no option is the default selected option, just set the select elemen'ts selectedIndex property to an appropriate value:

function resetSelectElement(selectElement) {
    selecElement.selectedIndex = 0;  // first option is selected, or
                                     // -1 for no option selected
}

However, since one option may have the selected attribtue or otherwise be set to the default selected option, you may need to do:

function resetSelectElement(selectElement) {
    var options = selectElement.options;

    // Look for a default selected option
    for (var i=0, iLen=options.length; i<iLen; i++) {

        if (options[i].defaultSelected) {
            selectElement.selectedIndex = i;
            return;
        }
    }

    // If no option is the default, select first or none as appropriate
    selectElement.selectedIndex = 0; // or -1 for no option selected
}

And beware of setting attributes rather than properties, they have different effects in different browsers.

select dropdown option set to default when click reset button on react js

You need to bind the selected value to select element.

1. Provide categoryID as a prop to your component.
2. Set it as the value property of select.

<select
    ...
    ...
    value={props.categoryID}
    onChange={e => handleCategory(e.target.value)}
></select>

reset select option while dependencies is default

Does this solve your problem? You should check that selected value exists in faculties object before anything else

const faculties = {
  1: ["Magister Manajemen", "Magister Teologi"],
  2: ["Ilmu Filsafat"],
  3: ["Pendidikan Agama", "Pendidikan Bahasa Inggris", "Pendidikan Ekonomi", "Pendidikan Luar Sekolah"],
  4: ["Akuntansi", "Manejemen"],
  5: ["Agroteknologi"],
  6: ["Informatika", "Sistem Informasi"],
  7: ["Profesi Ners", "Keperawatan"],
  8: ["Sekretari D3"],
};

let facultySelection = document.querySelector("#faculty");
let prodiSelection = document.querySelector("#pStudy");

facultySelection.addEventListener("change", (event) => {
  const val = event.target.value;

  if ( !val || !faculties[val] ) {
    pStudy.innerHTML = `<option value="0">-- SELECT PROGRAM STUDY --</option>`;
    return;
  } 

  let prodies = faculties[val];
  pStudy.innerHTML = prodies.map((p) => `<option value="${p}">${p}</option>`).join("");
});

<div class="mb-3">
  <label for="faculty">Faculty</label>
  <select class="form-select mt-2" id="faculty" name="faculty">
    <option value="0" selected="selected">--SELECT FACULTY --</option>
    <option value="1">Pascasarjana</option>
    <option value="2">Fakultas Filsafat</option>
    <option value="3">Fakultas Keguruan dan Ilmu Pendidikan</option>
    <option value="4">Fakultas Ekonomi dan Bisnis</option>
    <option value="5">Fakultas Pertanian</option>
    <option value="6">Fakultas Ilmu Komputer</option>
    <option value="7">Fakultas Keperawatan</option>
    <option value="8">Akademi Sekretari Manajemen Indonesia Klabat</option>
  </select>
</div>
<div class="mb-3">
  <label for="pStudy">Program of Study</label>
  <select class="form-select mt-2" id="pStudy" name="pStudy">
    <option value="0" selected>--SELECT PROGRAM OF STUDY --</option>
  </select>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

---

Related Topics