how do I set the default value of a dropdown after it has been changed?

Question

I have a dropdown on html page, when it is first loaded, it is set to a default value. But when a user changes the value, I want the ability to set the dropdown back to the original default value by clicking a button.

How can I achieve this? without keeping a copy of the original value in a hidden field.. its like how the javascript reset form function.. but I just want it to apply to just the drop down..

Thanks

Answer 1

considering you have a simple select box.. you can use val() to set the options..

<select id="selectId">
<option value="0">Default Value</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="button" id="buttonID" value="change"/>

try this

$('#buttonID').click(function(){
    $('#selectId').val('0'); //value of your default option
});

fiddle here

However, if you default option is disabled, then you would need a work around to make the assignment. a small bit like so:

$(document).on('click', '#buttonID', function(e) {
    var d = $('#selectId option:disabled').prop('disabled', '');
    $('#selectId').val(0);
    d.prop('disabled', 'disabled');
});

jsFiddle

Please keep in mind you can change the value of $('#selectId').val(0); to suite your own needs. For instance, if the 3rd option is your default and has a value of 'bob', then you could say $('#selectId').val('bob');

the answer i provided is just a simplest solution...@SpYk3HH modfied it if incase you default selected was disabled.... and yes @Felix Kling already answered this question in previous post here so have a look..anyways thanks guys..:)

---

Solution using Attribute via jQuery for Cross Compat

To further upon FelixKling's solution, here is the full jQuery version, using .attr which pulls from the original attributes as opposed to "changed properties" from .prop.

$(document).on('click', '#buttonID', function(e) {
        $('#selectID option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected')
});

jsFiddle Example

---

Combo Breaker!

To further solidify the solution, try a combo of the 2 above. This way, regardless of HTML layout, you're bound to reset to default. What I mean is, perhaps you don't have a select box with a set default, but rather option 1 is the default on load. Meanwhile, other selects do have a set default. The following will take care of both problems at the same time.

//    simply a jQuery 1.7+ way of delegating events to any Element match selector
$(document).on('click', 'button', function(e) {
    //    This both selects the first option of a select as well as looks for an option that might have had a default setting
    var opt = $('select').val(0).children('option').filter(function(i){ return this.hasAttribute('selected') });
    //    if opt.length is 0, this will do nothing and option 1 is already set, else this will set this default option to selected
    opt.prop('selected', 'selected');    
    // if you have an expected event tied to the select's "change" event, you might fire it here, like so:
    $('select').change();  
});

w/Out Comments, nice and short

$(document).on('click', 'button', function(e) {
    var opt = $('select').val(0).children('option').filter(function(i){ return this.hasAttribute('selected') });
    opt.prop('selected', 'selected');    
});

Example 1

Example 2 (with change event)