Reset select value to default

Question

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/

Answer 1

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;
}

Answer 2

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

Answer 3

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

Answer 4

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/

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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/

Answer 9

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

Answer 10

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

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

Answer 11

If you looking to reset, try this simply:

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

To set desire value, try like this:

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

Answer 12

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/

Answer 13

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.

Answer 14

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>

Answer 15

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

Answer 16

对于那些使用 Bootstrap-select 的人，你可能想使用这个：

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

Answer 17

A simple way that runs is

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

Answer 18

With jquery :

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

Answer 19

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

每次在填充选择之前调用此函数

Answer 20

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.

Answer 21

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

Answer 22

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.

Answer 23

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>

Answer 24

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 Angular2?