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?

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

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

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

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

Demo.

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

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

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

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

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>

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

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

This does the trick, and works for any select.

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

The best javascript solution I've found is this

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

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

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

I believe:

$("select option:first-child").attr("selected", "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)