jquery "clear" value in select box

Question

So I have some markup that looks like this, And some jQuery javascript:

let color_select = $('select#SelectByColor');
color_select.val([]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectByColor" class='filter-select' name='color'>
  <option value="">By color</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green" selected="selected">Green</option>
  <option value="Yellow">Yellow</option>
</select>

<button id="FilterReset">Reset</button>

That gets invoked when the "Reset" button is clicked. It pretty much works - when you click the reset button. the Select box value gets set to "". BUT.. the visual display of the select box is also set to blank, not "By color". Why is this the case?

In addition, according to the Chrome DevTools, the selected option is still Green.

Setting to an array. Try setting to string. - color_select.val(""); — Brian Wiltshire, Sep 16 '20 at 22:49
Does this answer your question? [How to reset a select element with jQuery](https://stackoverflow.com/questions/10502093/how-to-reset-a-select-element-with-jquery) — scrappedcola, Sep 16 '20 at 22:50
Do't get confused. **Reset** AKA `.reset()` means to Reset a `SELECT` Element to the default (initially) `selected` Option Element attribute. When using `mySel.value = ""` or jQ's `$mySel.val("")` - that's **reassigning**, not *resetting*. — Roko C. Buljan, Sep 16 '20 at 23:16
Sorry, wasn't being that precise... my button is called "reset", it's meant to clear any selected value from the list, not the official ".reset()" function. What I have is what I need - setting the value to an empty string. — Andy Wallace, Sep 18 '20 at 00:21

score 2 · Accepted Answer · answered Sep 16 '20 at 22:49

Set the value to an empty string, not an array.

$("#FilterReset").click(function() {
  let color_select = $('select#SelectByColor');
  color_select.val("");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="SelectByColor" class='filter-select' name='color'>
  <option value="">By color</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green" selected="selected">Green</option>
  <option value="Yellow">Yellow</option>
</select>

<button id="FilterReset">Reset</button>

score 1 · Answer 2 · edited Sep 16 '20 at 23:04

1

The value you set for the selector in the .val(...) function to needs to match the value="..." in HTML. So that should be color_select.val( "" )

Here's a code that works and a codepen:

jQuery($ => {
  $('#FilterReset').on('click', () => {
    $("#SelectByColor").val("");
  });
});

edited Sep 16 '20 at 23:04

Roko C. Buljan

180,066
36
283
292

answered Sep 16 '20 at 22:53

Kim Chouard

111
2

Thanks, all - my own stupidity, part cut and paste, part not quite getting it... of course, an empty string is the right value to set it to. Works now! – Andy Wallace Sep 17 '20 at 00:56

jquery "clear" value in select box

2 Answers2