How to set the default value of the dropdown list after changing it?

Question

I have a dropdown menu on the html page, when it loads, it is set to the default value. But when the user changes the value, I want the dropdown menu to return to the original default value by clicking the button.

How can i achieve this? without saving a copy of the original value in a hidden field. its kind of like a javascript reset form function, but I just want this to apply only to the dropdown.

thanks

Answer 1

given that you have a simple selection box. You can use val() to set the parameters.

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

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

the violin is here

However, if you use disabled by default, you will need to work to complete the task. a little like this:

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

jsFiddle

Remember that you can change the value of $('#selectId').val(0); to meet your own needs. For example, if the third option is your default and has the value "bob", you can say $('#selectId').val('bob');

the answer I provided is simply the easiest solution ... @ SpYk3HH changed it if you disabled your default option .... and yes @Felix Kling already answered this question in a previous post here , so take a look. thanks anyway guys .. :)

---

Jquery-based attribute solution for cross-compatible

To continue with FelixKling's solution, here is the full version of jQuery using .attr, which extracts the original attributes and not the “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 strengthen the solution, try combos from 2 above. Thus, regardless of the HTML format, you are tied to reset by default. I mean, maybe you do not have a selection box with a default value set, but option 1 is the default value at startup. Meanwhile, other selects have a default set. The following will take care of all the 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 "change" event, you might fire it here, like so: $('select').change(); }); 

w / Out Comments, beautiful 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)

Answer 2

"to initial default value"

You do not say how you set the default value, but if the default value is the first element you can say:

 document.getElementById('selectIdHere').selectedIndex = 0; // or with jQuery $("#selectIdHere").prop("selectedIndex", 0); 

Otherwise, you can save the default item when the DOM is ready and set it to a button:

 $(document).ready(function() { var $select = $("#selectIdHere"); $select.data("default", $select.val()); $("#buttonIdHere").click(function() { $select.val($select.data("default")); }); }); 

Note that you can simply use a local variable in the finished handler instead of saving the value with .data() , but if you want to do this for more than one element, it would probably be more convenient to use the default association directly with the element using .data() .

Answer 3

I would advise you to take a look at the DOM defaultSelected property.

EDIT: But it really depends on your HTML markup. defaultSelected requires one of the <option> have a selected property .

Answer 4

You just need to do this:

 $("#yourresetbutton").on("click", function(){ $("#yourDropDownId").val("default option value"); }); 

Here #resetbutton is the identifier of your reset button, #yourDropDownId is the identifier of your drop-down list, and the default option value will be the default parameter value that is selected by default.

Update if you want the selected item to be selected, the above may not work, you can try the following:

 $("#yourresetbutton").on("click", function(){ $("#yourDropDownId").find("option[val='yourDefaultValue']").attr("selected", "selected"); }); 

Answer 5

I believe your HTML framework, or you, manually, mark the default value selected from DropDown, like this, using the "selected" attribute.

 <select id="myCombo" > <option >1</option> <option selected="selected">2</option> <option >3</option> </select> <button id="reset">Reset Select</button> 

This attribute will not be overridden by user interaction, only JS can interact with this flag, so use this attribute to "remember" the default value.

 $('#reset').click(function(){ var self = $('#myCombo'); self.val(self.find('option[selected]').val()); }); 

Therefore, you do not need to add magic data attributes or any magic things that you (or the next developer) probably do not remember to set.

You can try it here:

http://jsbin.com/azupog/1/edit

Answer 6

Absolutely, the reset button will do your job.