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

208

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

3,043
1
22
33

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

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 34 · Answer 2 · edited Jan 13 '17 at 17:50

34

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

But those new buttons though..

21,377
10
81
108

answered May 08 '12 at 15:58

karim79

339,989
67
413
406

6

if the select element does not have an option with `value=""` then one will be created in newer versions of jquery – But those new buttons though.. 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
3

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
do you have any solution how to resolve this problem using .val("") to set first option in select in newer version of jquery? i cant simply replace this and use other solution, because my system is huge and this stopped working after upgrade jquery from 1.7 to 3.6 – Robert Witczyk Jun 19 '23 at 11:14

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

17

$('#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

196,159
39
305
313

Very helpful link - key part for me was (substitute 'checked' for 'selected' in our case): "The checked attribute value does not change with the state of the checkbox, while the checked property does". So attribute in this case only initializes the selection. Using "prop' allows you to change the selection state, which as you advise is best to use. Thank you Roko! – James Lee Dec 03 '22 at 20:55
1

@JamesLee you're very welcome. Yes, `checked` is for checkboxes and radio buttons. – Roko C. Buljan Dec 03 '22 at 20:56
this is really works with the same example above, as the first option has not val – Alaa Radwan Jan 18 '23 at 13:41

score 14 · Answer 4 · answered Mar 18 '20 at 12:47

14

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,715
18
17

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 9 · Answer 5 · edited Dec 18 '13 at 10:59

9

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

edited Dec 18 '13 at 10:59

Andrea

11,801
17
65
72

answered Dec 18 '13 at 10:38

serviom

121
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 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

79,297
15
120
134

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,432
8
46
54

score 2 · Answer 9 · 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 1 · Answer 10 · 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,959
14
50
79

score 1 · Answer 11 · 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

174
1
7

Junaid Anwar · Answer 12 · 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 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,285
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

537
5
11

score -1 · Answer 15 · edited Jul 18 '23 at 14:41

-1

This works for me:

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

edited Jul 18 '23 at 14:41

heartbeat

41
1
7

answered Oct 14 '22 at 09:40

Aruna Mahesh

31
2
8

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 18 '22 at 12:57

How to reset a select element with jQuery

15 Answers15

Linked