how to reset values of select dropdown

Question

I have 3 different dropdowns which are all connected to each other. in the second drop-down options appear based on the selection in the first one...and so on

let's say I select that I have books and movies in the first one.

If I select books ---> the song of ice and fire and a clash of kings appear if I select movies ---> Django Unchained, pulp fiction appear... etc

However, if a user makes "mistake" of choosing the wrong book (let's say the song of ice and fire) and goes back to books ---> the same book is still appearing in the select dropdown.

What I want to do, is "reset" or the clear result of the previously chosen section.

I've tried doing this:

document.getElementById('books').value = "";

but it completely deletes the placeholder of the second dropdown. I want the placeholder to be back to option 0 ---> choose a book

Here is my fiddle

Please help me solve this problem

The option(s) which you don't wan't, set their css property(display: none;) — user9539919
– user9539919, Commented Mar 31, 2018 at 14:38

Mladen Ilić · Accepted Answer · 2018-03-31 14:42:16Z

8

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.

edited Mar 31, 2018 at 14:42

answered Mar 31, 2018 at 14:38

Mladen Ilić

1,7951 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mladen Ilić Over a year ago

You are welcome. Glad I could help! If one of these answer helped you, please consider marking it as accepted.

aiden87 Over a year ago

yeh it definitely did! i will also research data-default-index. And yes already tried, but i need to wait 5 more mins before accepting

epascarello · Accepted Answer · 2018-03-31 14:45:24Z

2

Set the selectedIndex to -1 to reset it so no option is selected or to 0 to set it to the first option in the list.

var clk = function() {
  var index = this.dataset.index;
  document.querySelector("#s").selectedIndex = index;
};

document.querySelector("#b1").addEventListener("click",  clk);
document.querySelector("#b2").addEventListener("click",  clk);

<select id="s">
  <option>1 Foo</option>
  <option>2 Foo</option>
  <option>3 Foo</option>
  <option>4 Foo</option>
  </select>
  <button type="button" id="b1" data-index="-1">Change No Selection</button>
  <button type="button" id="b2" data-index="0">Change First Selection</button>

edited Mar 31, 2018 at 14:45

answered Mar 31, 2018 at 14:40

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

how to reset values of select dropdown

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related