[jquery] How to reset a select element with jQuery

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?

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)

The best javascript solution I've found is this

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

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

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(){_x000D_
    $('#but').click(function(){_x000D_
        $('#baba').val(false);_x000D_
    })_x000D_
});

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

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" );

If you want to reset by id

$('select[id="baba"]').empty();

If you want to reset by name

$('select[name="baba"]').empty();

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

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

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();

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

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

Demo.

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>

This does the trick, and works for any select.

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

I believe:

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

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

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