When click button Selectlist goes default with Javascript

user_19853701 0
Viewed 38
  <select asp-for="ProductFilter.BrandId"
    asp-items="@(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
    <option>Chose one</option>
  </select>
<button type="button" onclick="clearRadioButtons()" class="btn btn-outline-info mt-3">Clear</button>

I have some list items and 1 default item which is "Chose One" and what i want is when i click Clear button just make select list choosen value "Chose One" how can i do this with javascript? Thanks For helping!

For example i got A,B,C,D in options and of course default Chose one and when someone chose C and after click "Clear" button i want to make it "Chose One" back.

asp.net-core html javascript
2 Answers

To fulfill your requirements I'll propose two solutions that should (or at least one of them) work for you.

Option 1: Default Form Behavior (let the browser do the trick for you)

For this situation I'd rather use the reset button type of the form element. The button[type="reset"] resets all* the form fields to their original values when the browser loaded the page.

Here's an example, you may choose an option from the list and then click on "Reset" to revert the list to its original state.

<form>
  <select>
    <option value="" selected>Choose</option>
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
  <button type="reset">Reset</button>
</form>

all:* keep in mind, the button[type="reset"] will try to reset all the form fields to their original values and not only your select element.

Note: in the above example, i intentianally set the option with the text "Choose" as selected using the selected attribute in order for that option to be selected no matter what its position in the select element.

Option 1: JavaScript Workaround

In case the first solution cannot be used, here's a solution that relies on JavaScript to do the trick.

The idea here is to set a default option by specifying an ID for it (so we can easily retrieve it by JavaScript) and an Event Listener on the button that resets the list.

const list = document.getElementById('list'),
  defaultOption = document.getElementById('default-option'),
  resetBtn = document.getElementById('reset-list');

// listen for "click" events on the "Reset" button 
resetBtn.addEventListener('click', e => {
  /** 
  * the below line is required only when you use a link (for example) instead of a button or the button type is different from "[type=button]". 
  /* The role of that line is to prevent the default behavior of the clicked element. In case of a link, the line prevents the unwanted jump on the page as the browser tries to follow the link and it scrolls the page all the way to the top (or simply follows the link if an "href" attribute is set on the "a" tag).
  */
  e.preventDefault();

  // reset the list
  defaultOption.selected = !0;
});
<select id="list">
  <option value="" id="default-option" selected>Choose</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<button type="button" id="reset-list">Reset</button>

I recommend using the selected attribute on the option you want to be reselected once the "Reset" button is clicked.

user_63885520

Add empty value to the default option and add an id to the select element:

<select id="brand-select" asp-for="ProductFilter.BrandId" asp-items="@(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
    <option value="">Chose one</option>
</select>

Then select default option like this:

function clearRadioButtons() {
    var selectElement = document.getElementById("brand-select");

    selectElement.value = "";
}
user_108391340
Related