Reset select value to default

Javascript Problem Overview

I have select box

<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

I have also reset button, here default (selected) value is "b", suppose I select "c" and after I need resert select box value to default, how to make this using jquery?

$("#reset").on("click", function () {
    // What do here?
});

jsfiddle: http://jsfiddle.net/T8sCf/1/

Javascript Solutions

Solution 1 - Javascript

You can make use of the defaultSelected property of an option element:

> Contains the initial value of the selected HTML attribute, indicating whether the option is selected by default or not.

So, the DOM interface already keeps track which option was selected initially.

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

DEMO

This would even work for multi-select elements.

If you don't want to iterate over all options, but "break" after you found the originally selected one, you can use .each instead:

$('#my_select option').each(function () {
    if (this.defaultSelected) {
        this.selected = true;
        return false;
    }
});

Without jQuery:

var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
    options[i].selected = options[i].defaultSelected;
}

Solution 2 - Javascript

$('#my_select').get(0).selectedIndex = 1;

But, In my opinion, the better way is using HTML only (with <input type="reset" />):

<form>
    <select id="my_select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <input type="reset" value="reset" />
</form>

Check the jsFiddle Demo.

Solution 3 - Javascript

$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});

Solution 4 - Javascript

Why not use a simple javascript function and call it on onclick event?

function reset(){
document.getElementById("my_select").selectedIndex = 1; //1 = option 2
}

Solution 5 - Javascript

You can use the data attribute of the select element

<select id="my_select" data-default-value="b">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

Your JavaScript,

$("#reset").on("click", function () {
    $("#my_select").val($("#my_select").data("default-value"));
});

http://jsfiddle.net/T8sCf/10/

UPDATE

If you don't know the default selection and if you cannot update the html, add following code in the dom ready ,

$("#my_select").data("default-value",$("#my_select").val());

http://jsfiddle.net/T8sCf/24/

Solution 6 - Javascript

$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});

Solution 7 - Javascript

<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});

This is a simple way for your question. only one line answer.

Solution 8 - Javascript

One nice clean way is to add a data-default attribute to the select

<select id="my_select" data-default="b">
...
</select>

An then the code is really simple:

$("#reset").on("click", function () {
    var $select = $('#my_select');
    $select.val($select.data('default'));
});

Live example: http://jsfiddle.net/T8sCf/7/

Solution 9 - Javascript

You can also reset the values of multiple SELECTs and then trigger the submit button.

Please see it here in action:

Live Example:

$(function(){
    $("#filter").click(function(){
        //alert('clicked!');
        $('#name').prop('selectedIndex',0);
        $('#name2').prop('selectedIndex',0);
        $('#submitBtn').click();
    });
});

Solution 10 - Javascript

$("#reset").on("click", function () {
    $('#my_select').val('-1');
});

http://jsfiddle.net/T8sCf/1323/

Solution 11 - Javascript

If you looking to reset, try this simply:

$('element option').removeAttr('selected');

To set desire value, try like this:

$(element).val('1');

Solution 12 - Javascript

Bind an event handler to the focus event of the select to capture the previous value. Then set the value of the select to the previous value when reset is clicked.

var previousValue = "";
$("#my_select").on("focus",function(){
    previousValue = $(this).val();
});

$("#reset").on("click", function () {
   $("#my_select").val(previousValue);
});

Working Example: http://jsfiddle.net/T8sCf/17/

Solution 13 - Javascript

You can do this way:

var preval = $('#my_select').val(); // get the def value

$("#reset").on("click", function () {
   $('#my_select option[value*="' + preval + '"]').prop('selected', true);
});

checkout this fiddle

take a var which holds the default loaded value before change event then get the option with the attribute selector of value with holds the var value set the property to selected.

Solution 14 - Javascript

This code will help you out.

<html>
<head>
	<script type="text/JavaScript" src="jquery-2.0.2.min.js"></script>
	<script type="text/JavaScript">
		$(function(){
			var defaultValue = $("#my_select").val();
			$("#reset").click(function () {
				$("#my_select").val(defaultValue);
			});
		});
	</script>
</head>
<body>
	<select id="my_select">
		<option value="a">a</option>
		<option value="b" selected="selected">b</option>
		<option value="c">c</option>
	</select>
	<div id="reset">
		<input type="button" value="reset"/>
	</div>
</body>

Solution 15 - Javascript

If using Spring forms, you may need to reset the selected to your options label. You would set your form:select id value to an empty string resets your selection to the label as the default.

<form:select path="myBeanAttribute" id="my_select">
    <form:option value="" label="--Select One--"/>
    <form:options items="${mySelectionValueList}"/>
</form:select>

 $("#reset").on("click", function () {
        $("#my_select").val("");
 });

in the case where there's a reset button. Otherwise

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

Solution 16 - Javascript

For those who are working with Bootstrap-select, you might want to use this:

$('#mySelect').selectpicker('render');

Solution 17 - Javascript

A simple way that runs is

 var myselect = $("select.SimpleAddAClass");
 myselect[0].selectedIndex = 0;
 myselect.selectmenu("refresh");

Solution 18 - Javascript

With jquery :

$("#reset").on("click", function() {
    $('#my_select').val($('#my_select').find('option[selected="selected"]').val());
}

Solution 19 - Javascript

$('#my_select').find('option:not(:first)').remove();

Call this function each time before populating the select

Solution 20 - Javascript

This works for me:

$("#reset").on("click", function () {
    $("#my_select option[selected]").prop('selected', true);
}

You find for the default option that has the select attribute and you change the selection to that option.

Solution 21 - Javascript

Reset all selection fields to the default option, where the attribute selected is defined.

$("#reset").on("click", function () {
    // Reset all selections fields to default option.
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
});

Solution 22 - Javascript

I was trying to resolve it like the other answers unfortunately, I didn't get a right way to do it, once I tried as I write below:

$('#<%=ddID.ClientID %>').get(0).selectedIndex = 0;

this code works for me, I hope that will be useful for you guys.

Best Regards.

Samuel Alvarado.

Solution 23 - Javascript

You can try

$('select')[0].value = "default vaule"

function reset(){
  $('select')[0].value="default value"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="default value" >Default</option>
  <option value="1" >Value 1</option>
  <option value="2" >Value 2</option>
  <option value="3" >Value 3</option>
</select>
<button onclick="reset()" >Click</button>

Solution 24 - Javascript