How to reset a select element with jQuery

Question

I have

<select id="baba">
<option>select something</option>
<option value="1">something 1</option>
<option value=2">something 2</option>
</select>

Using jQuery, what would be the easiest (less to write) way to reset the select so the first option is selected?

When do you want this reset to happen? if on page load, simply add attribute selected to that option. — Selvakumar Arumugam, May 08 '12 at 15:57
@Vega it is not relevant to the question when I want this to happen. It is hooked to an event triggered by a user action. — Itay Moav -Malimovka, May 08 '12 at 16:50

Bibin Velayudhan · Accepted Answer · 2012-05-08T16:10:09.487

192

Try this. This will work. $('#baba').prop('selectedIndex',0);

Check here http://jsfiddle.net/bibin_v/R4s3U/

edited May 08 '12 at 16:10

answered May 08 '12 at 15:59

Bibin Velayudhan

2,875
1
20
32

If i understood correctly, then he wants to select `` – Selvakumar Arumugam May 08 '12 at 16:08
3

This does not trigger the `change` event – tread Oct 30 '18 at 19:32
1

This has one downside: it will select the first element of a – Stephan Vierkant Aug 23 '19 at 14:44

score 31 · Answer 2 · edited Jan 13 '17 at 17:50

31

In your case (and in most use cases I have seen), all you need is:

$("#baba").val("");

Demo.

edited Jan 13 '17 at 17:50

Eaten by a Grue

19,208
10
77
99

answered May 08 '12 at 15:58

karim79

334,458
66
409
405

5

if the select element does not have an option with `value=""` then one will be created in newer versions of jquery – Eaten by a Grue Jan 13 '17 at 17:50
I stumbled upon the exact issue. My code suddenly stopped working and I figured out that upgrading jquery from 1x to 2x was the reason. Hence it is dangerous to use this code. One small correction to @billynoah 's comment - A new option tag won't be created, but the selected value will be null. On clicking the select, we will be able to select from the original list of options only. Better use some other solution as it will fail in jquery 2+. – Ridhuvarshan Jul 31 '18 at 13:07
2

Down voting. This does not work with newer versions of jquery and has a bad side-effect of creating a new option and you will have to fix this if you upgrade. – splashout Oct 22 '19 at 18:55

score 13 · Answer 3 · answered May 08 '12 at 15:59

13

$('#baba option:first').prop('selected',true);

Nowadays you best use .prop(): http://api.jquery.com/prop/

answered May 08 '12 at 15:59

Roko C. Buljan

180,066
36
283
292

score 7 · Answer 4 · edited Dec 18 '13 at 10:59

7

$('#baba').prop('selectedIndex',-1);

edited Dec 18 '13 at 10:59

Andrea

11,073
17
60
64

answered Dec 18 '13 at 10:38

serviom

101
1
6

5

This should be the accepted answer, because it also covers a ` – Stephan Vierkant Aug 23 '19 at 14:43
For me it worked similar to `$('#baba').val("")` – Sumit Wadhwa Aug 26 '21 at 15:08

score 7 · Answer 5 · answered Mar 18 '20 at 12:47

7

if none of those solutions didn't work for you, try adding after

.trigger( "change" );

ex.

$("#baba").val("").trigger( "change" );

or

$("#baba").val(false).trigger( "change" );

or

$("#baba option").prop("selected", false).trigger( "change" );

or

$('#baba').prop('selectedIndex',-1).trigger( "change" );

or

$('#baba option:first').prop('selected',true).trigger( "change" );

answered Mar 18 '20 at 12:47

Moode Osman

1,110
12
13

Most comprehensive answer +1, but should give a short explanation about each option. They vary a little. – JoePC May 13 '21 at 17:51

score 6 · Answer 6 · answered Jul 18 '16 at 07:26

Reset single select field to default option.

<select id="name">
    <option>select something</option>
    <option value="1" >something 1</option>
    <option value="2" selected="selected" >Default option</option>
</select>
<script>
    $('name').val( $('name').find("option[selected]").val() );
</script>

Or if you want to reset all form fields to the default option:

<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

score 4 · Answer 7 · answered May 08 '12 at 16:00

4

Edit: Old fashioned way,

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

~~Try below and it should work for your case,~~

$('#baba option:first').prop('selected', true);

DEMO

answered May 08 '12 at 16:00

Selvakumar Arumugam

78,145
14
119
133

score 2 · Answer 8 · answered May 08 '12 at 15:58

2

$('#baba option:first').attr('selected',true);

answered May 08 '12 at 15:58

Thulasiram

8,258
8
45
52

score 1 · Answer 9 · answered May 08 '12 at 15:59

1

This does the trick, and works for any select.

$('#baba').val($(this).find('option:first').val());

answered May 08 '12 at 15:59

ilyes kooli

11,766
13
49
79

score 1 · Answer 10 · answered Dec 04 '17 at 12:53

1

The best javascript solution I've found is this

elm.options[0].selected="selected";

answered Dec 04 '17 at 12:53

Sebastian Td

134
1
7

Junaid Anwar · Answer 11 · 2019-05-03T13:51:56.397

If you don't want to use the first option (in case the field is hidden or something) then the following jQuery code is enough:

$(document).ready(function(){
    $('#but').click(function(){
        $('#baba').val(false);
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select id="baba">
<option>select something</option>
<option value="1">something 1</option>
<option value=2">something 2</option>
</select>
    
    <input type="button" id="but" value="click">

score 1 · Answer 12 · answered Feb 02 '20 at 11:32

This function should work for all types of select (multiple, select, select2):

$.fn.Reset_List_To_Default_Value = function()
{
    $.each($(this), function(index, el) {
        var Founded = false;

        $(this).find('option').each(function(i, opt) {
            if(opt.defaultSelected){
                opt.selected = true;
                Founded = true;
            }
        });

        if(!Founded)
        {
            if($(this).attr('multiple'))
            {
                $(this).val([]);
            }
            else
            {
                $(this).val("");
            }
        }
        $(this).trigger('change');
    });
}

To use it just call:

$('select').Reset_List_To_Default_Value();

score 0 · Answer 13 · answered May 08 '12 at 15:59

0

I believe:

$("select option:first-child").attr("selected", "selected");

answered May 08 '12 at 15:59

raydowe

1,235
1
16
31

score 0 · Answer 14 · answered Oct 22 '19 at 19:37

0

This works a little differently from other answers in that it unselects all options:

$("#baba option").prop("selected", false);

(Borrowed from https://stackoverflow.com/a/11098981/1048376)

answered Oct 22 '19 at 19:37

splashout

499
5
10

How to reset a select element with jQuery

14 Answers14

Linked