40

How do I clear the dropdownlist values on button click event using jQuery?

braX
  • 11,506
  • 5
  • 20
  • 33
kumar
  • 2,944
  • 18
  • 60
  • 89

5 Answers5

62
$('#dropdownid').empty();

That will remove all <option> elements underneath the dropdown element.

If you want to unselect selected items, go with the code from Russ.

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • How can i get all the options back after setting the dropdown to empty, note that the dropdown is being populated from database? – Piyush Mattoo Mar 07 '12 at 01:21
  • 1
    @Piyush: If you want to restore the exact same option, you can just cache those. Like, `var $opts = $('select option').detach();` and then you can re-insert those later with `$opts.appendTo('#selectID');` – jAndy Mar 07 '12 at 03:04
  • I get how that clears it, but in my case the selection options were populated from a database based on selection of another dropdown. So, how do I put the default text there, since the default text was there from pre-ajaxing so to speak so the source shows it but the ajax doesnt. Just putting `$('#blarg').val('Default Text');` didnt work for me. – Jonathan Weinraub Aug 20 '15 at 20:44
43

A shorter alternative to the first solution given by Russ Cam would be:

$('#mySelect').val('');

This assumes you want to retain the list, but make it so that no option is selected.

If you wish to select a particular default value, just pass that value instead of an empty string.

$('#mySelect').val('someDefaultValue');

or to do it by the index of the option, you could do:

$('#mySelect option:eq(0)').attr('selected','selected'); // Select first option
user113716
  • 318,772
  • 63
  • 451
  • 440
  • 3
    this is not correct. he wants to clear all options. val(''); doesnt do that, it simpyl clears the selection. you should use .empty() instead – nights Mar 09 '16 at 11:39
20

If you want to reset the selected options

$('select option:selected').removeAttr('selected');

If you actually want to remove the options (although I don't think you mean this).

$('select').empty();

Substitute select for the most appropriate selector in your case (this may be by id or by CSS class). Using as is will reset all <select> elements on the page

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
0

If you want to reset bootstrap page with button click using jQuery :

function resetForm(){
        var validator = $( "#form_ID" ).validate();
        validator.resetForm();
}

Using above code you also have change the field colour as red to normal.

If you want to reset only fielded value then :

$("#form_ID")[0].reset();
Prabhjyot Saini
  • 21
  • 3
0

If all the other codes do not work, try $("#element_id").selectpicker('val', '');

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Omotayo Kuye
  • 1