jQuery 更改后如何设置下拉列表的默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17526591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I set the default value of a dropdown after it has been changed?
提问by user2206329
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.
我在 html 页面上有一个下拉列表，当它第一次加载时，它被设置为默认值。但是当用户更改值时，我希望能够通过单击按钮将下拉列表设置回原始默认值。
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..
我怎样才能做到这一点？没有在隐藏字段中保留原始值的副本..就像javascript重置表单功能一样..但我只想将它应用于下拉列表..
Thanks
谢谢
回答by bipen
considering you have a simple select box.. you can use val()to set the options..
考虑到你有一个简单的选择框..你可以val()用来设置选项..
<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:
但是，如果您的默认选项是disabled，那么您需要一个变通方法来进行分配。有点像这样：
$(document).on('click', '#buttonID', function(e) {
var d = $('#selectId option:disabled').prop('disabled', '');
$('#selectId').val(0);
d.prop('disabled', 'disabled');
});
jsFiddle
js小提琴
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');
请记住，您可以更改 的值$('#selectId').val(0);以满足您自己的需要。例如，如果第三个选项是您的默认选项并且值为“bob”，那么您可以说$('#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 hereso have a look..anyways thanks guys..:)
我所提供的答案仅仅是一个简单的解决方案... @ SpYk3HH modfied，如果柜面你默认选中被禁用....没错@Felix克林已经回答在以前的帖子这个问题在这里等有look..anyways感谢你们。 .:)
Solution using Attributevia jQuery for Cross Compat
通过 jQuery使用Attribute进行交叉兼容的解决方案
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.
为了进一步完善 FelixKling 的解决方案，这里是完整的 jQuery 版本，它使用 .attr 从原始属性中提取，而不是从 .prop 中“更改属性”。
$(document).on('click', '#buttonID', function(e) {
$('#selectID option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected')
});
jsFiddle Example
jsFiddle 示例
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.
要进一步巩固解决方案，请尝试上述 2 的组合。这样，无论 HTML 布局如何，您都必须重置为默认值。我的意思是，也许您没有设置默认值的选择框，而是选项 1 是加载时的默认值。同时，其他选择确实有一个设置的默认值。下面将同时解决这两个问题。
// 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
示例 1
Example 2 (with change event)
示例 2（带有更改事件）
回答by nnnnnn
"to the original default value"
“到原始默认值”
You don't say how you are setting the default, but if the default value is the first item 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 back on the button click:
否则，您可以在 DOM 准备好时保存默认项目，然后在单击按钮时将其重新设置：
$(document).ready(function() {
var $select = $("#selectIdHere");
$select.data("default", $select.val());
$("#buttonIdHere").click(function() {
$select.val($select.data("default"));
});
});
Note that you could just use a local variable in the ready handler instead of storing the value with .data(), but if you wanted to do this for more than one element it would probably be more manageable to use associate the default directly with the element using .data().
请注意，您可以只在就绪处理程序中使用局部变量，而不是使用 存储值.data()，但是如果您想为多个元素执行此操作，则使用将默认值直接与使用 的元素关联可能更易于管理.data()。
回答by Adrian Salazar
I suppose your HTML framework, or you, manually, are marking the default selected value from the DropDown like this, using the "selected" attribute.
我想你的 HTML 框架，或者你，手动，使用“selected”属性从 DropDown 中标记默认的选定值。
<select id="myCombo" >
<option >1</option>
<option selected="selected">2</option>
<option >3</option>
</select>
<button id="reset">Reset Select</button>
This attribute won't get overridden by the user interaction, only JS could mess with this flag, so, use this attribute to "remember" the default value.
这个属性不会被用户交互覆盖，只有 JS 会弄乱这个标志，所以，使用这个属性来“记住”默认值。
$('#reset').click(function(){
var self = $('#myCombo');
self.val(self.find('option[selected]').val());
});
In this way you dont have to add magic data- attributes, or any magic things that you (or the next developer) won't probably remember to set.
通过这种方式，您不必添加神奇的数据属性，或者您（或下一个开发人员）可能不会记得设置的任何神奇的东西。
You can try it here:
你可以在这里尝试：
回答by Kamran Ahmed
You just need to do this:
你只需要这样做：
$("#yourresetbutton").on("click", function(){
$("#yourDropDownId").val("default option value");
});
Here #resetbuttonis the id of your reset button, #yourDropDownIdis the id of your drop down and default option valuewill be the value of the default option that is selected by default.
这#resetbutton是您的重置按钮#yourDropDownId的 id ，是您的下拉菜单的 id，default option value将是默认选择的默认选项的值。
Updateif you want the disabled item to be selected, the above may not work, you may try this:
更新如果你想要禁用的项目被选中，上面的可能不起作用，你可以试试这个：
$("#yourresetbutton").on("click", function(){
$("#yourDropDownId").find("option[val='yourDefaultValue']").attr("selected", "selected");
});
回答by Eric
I'd suggest you take a look at the DOM property defaultSelected.
我建议您查看 DOM 属性defaultSelected。
EDIT:But this really depends on your HTML-markup. defaultSelectedrequires that one of the <option>'s has the selected property.
编辑：但这实际上取决于您的 HTML 标记。defaultSelected要求其中之一<option>具有selected property.
回答by aakashkrgoel
Absolutely, a reset button would do your job.
绝对，重置按钮可以完成您的工作。
