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/

If you want to reset the whole form, just call the built-in JavaScript `.reset()` on the `
` element. — andyb, Jun 04 '13 at 08:33
possible duplicate of [reset a select element](http://stackoverflow.com/questions/9141939/reset-a-select-element) — andyb, Jun 04 '13 at 08:35
@andyb The first element is not necessarily the default selected value — BrunoLM, Jun 04 '13 at 08:36
@BrunoLM yes I take your point. I referenced the other question because it's very similar - "resetting a select value to default with JavaScript" — andyb, Jun 04 '13 at 08:38

Felix Kling · Accepted Answer · 2015-12-15T14:33:08.617

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

set your default option element with `defaultSelected` attribute and reset like this `$('#select option').removeAttr('selected');` — skorenb, Aug 04 '17 at 15:57

score 20 · Answer 2 · answered Jun 04 '13 at 08:32

20

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

answered Jun 04 '13 at 08:32

1

Any reason to use `get(0)` with `ID` selector? – Chamika Sandamal Jun 04 '13 at 08:37
2

@ChamikaSandamal No, just fast typing. – Jun 04 '13 at 08:39
2

@ChamikaSandamal `.get(0)` is used to obtain the DOM element so that you can access properties such as `.selectedIndex` – billyonecan Jun 04 '13 at 08:42
Instead of `$('#my_select').get(0)`, we can also use `$('#my_select')[0]` - *faster* typing. – Jay Dadhania May 17 '20 at 14:17

score 15 · Answer 3 · answered Jun 04 '13 at 08:32

15

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

answered Jun 04 '13 at 08:32

웃웃웃웃웃

11,829
15
59
91

1

I don't know advanced what is default value in select box – Oto Shavadze Jun 04 '13 at 08:34
1

@OTARIKI - if you dont know in advance what the default is, how do you know which option to add the `selected="selected"` attribute to?! – Jamiec Jun 04 '13 at 08:35
Right, so server-side you can still generate client-side code which knows the default! – Jamiec Jun 04 '13 at 08:37
1

its not resetting, its setting i think. – Jai Jun 04 '13 at 08:39
@Jamiec: It could, but it does not necessarily generate the JavaScript. – Felix Kling Jun 04 '13 at 08:39
this might not work on some browsers. try triggering a `change()` after that : `$("#my_select").val('b').change()` – krishwader Jun 04 '13 at 08:59

score 13 · Answer 4 · answered Jul 15 '14 at 22:39

13

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

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

answered Jul 15 '14 at 22:39

Colin R. Turner

1,323
15
24

what does it mean '1 = option 2' ? – Json Mar 18 '19 at 19:06
JS counts selected indeces from 0. The first selected option would be selectedIndex = 0, the second option = 1, third option = 2, etc. – Colin R. Turner Mar 19 '19 at 00:34

Chamika Sandamal · Answer 5 · 2013-06-04T08:43:12.943

9

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/

edited Jun 04 '13 at 08:43

answered Jun 04 '13 at 08:34

Chamika Sandamal

23,565
5
63
86

1

Finally, this worked for me thanks [ I am using Material Bootstrap ] – Wasim Sayyed Jan 10 '19 at 16:57

score 5 · Answer 6 · answered Jun 04 '13 at 08:32

5

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

answered Jun 04 '13 at 08:32

IdemeNaHavaj

2,297
1
12
10

3

It won't work because selected 'b' is located on second position – Oleksii Aza Jun 04 '13 at 08:34

score 5 · Answer 7 · answered May 29 '19 at 04:44

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

score 4 · Answer 8 · answered Jun 04 '13 at 08:33

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/

score 3 · Answer 9 · edited Aug 16 '17 at 18:58

3

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

edited Aug 16 '17 at 18:58

nyedidikeke

6,899
7
44
59

answered Oct 30 '15 at 16:56

Chale CS

353
4
15

Sagar Sinha · Answer 10 · 2018-03-09T10:26:37.820

3

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

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

edited Mar 09 '18 at 10:26

answered Mar 09 '18 at 09:55

Sagar Sinha

375
2
8
26

short and simple as it should be! – devasia2112 Apr 28 '19 at 09:53

Vivek Sharma · Answer 11 · 2020-04-21T09:02:33.447

3

If you looking to reset, try this simply:

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

To set desire value, try like this:

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

edited Apr 21 '20 at 09:02

answered Apr 21 '20 at 08:56

Vivek Sharma

577
5
9

score 1 · Answer 12 · answered Jun 04 '13 at 08:36

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/

Jai · Answer 13 · 2013-06-04T08:42:45.160

1

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.

edited Jun 04 '13 at 08:42

answered Jun 04 '13 at 08:36

Jai

74,255
12
74
103

Instead of `$('#my_select option[value*="' + preval + '"]').prop('selected', true);`, you could just do `$('#my_select').val(preval)`. – Felix Kling Jun 04 '13 at 08:54

Raghav · Answer 14 · 2013-06-04T09:04:00.187

1

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>

edited Jun 04 '13 at 09:04

answered Jun 04 '13 at 08:43

Raghav

6,893
3
19
28

The OP doesn't know which option will be selected by default. – Felix Kling Jun 04 '13 at 08:44
On load of the page, a variable could be set based on the value that is selected by the app. The same variable could be used for setting the value on click of reset. – Raghav Jun 04 '13 at 08:57
Maybe you should add that to your answer. – Felix Kling Jun 04 '13 at 08:58

score 1 · Answer 15 · answered Apr 28 '15 at 18:03

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

score 1 · Answer 16 · answered Aug 22 '16 at 13:07

1

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

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

answered Aug 22 '16 at 13:07

KJS

1,176
1
13
29

score 1 · Answer 17 · answered Oct 12 '16 at 14:20

1

A simple way that runs is

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

answered Oct 12 '16 at 14:20

daniel_mutu

163
1
14

score 1 · Answer 18 · answered Jun 09 '17 at 13:24

1

With jquery :

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

answered Jun 09 '17 at 13:24

OlivierB

11
2

It would be worth expanding on your answer to explain what the code does. Think about new users to jQuery who have no idea what this means. – Bugs Jun 09 '17 at 13:43

score 1 · Answer 19 · answered Oct 28 '18 at 22:02

1

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

Call this function each time before populating the select

answered Oct 28 '18 at 22:02

joash

2,205
2
26
31

What I have been looking for to reset the select widget - by removing all options – Carlo Ledesma Dec 15 '19 at 13:30

score 0 · Answer 20 · answered Jul 09 '14 at 11:20

0

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.

answered Jul 09 '14 at 11:20

Tomás

3,501
3
21
38

score 0 · Answer 21 · answered Jul 18 '16 at 07:19

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

score 0 · Answer 22 · answered Feb 02 '17 at 16:45

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.

score 0 · Answer 23 · answered May 19 '21 at 06:38

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>

score -3 · Answer 24 · answered Nov 07 '17 at 06:47

-3

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?

answered Nov 07 '17 at 06:47

kishore Raju

1

This is not the right way to ask questions. This is only for answers. For your query, please go to through ASK QUESTION button. – Siddhartha esunuri Nov 07 '17 at 06:55
sorry. i am new user to this community. will post it in Ask Questions from next time – kishore Raju Nov 07 '17 at 08:29

Reset select value to default

24 Answers24

Linked

Related