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?

Solution 1:

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

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

Solution 2:

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

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

Demo.

Solution 3:

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

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

Solution 4:

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

Solution 5:

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>