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
考虑到您有一个简单的选择框..您可以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"/>
尝试这个
$('#buttonID').click(function(){
$('#selectId').val('0'); //value of your default option
});
但是，如果您的默认选项是disabled，那么您将需要解决方法来进行分配。有点像这样：
$(document).on('click', '#buttonID', function(e) {
var d = $('#selectId option:disabled').prop('disabled', '');
$('#selectId').val(0);
d.prop('disabled', 'disabled');
});
请记住，您可以根据$('#selectId').val(0);自己的需要更改 的值。例如，如果第三个选项是您的默认选项并且值为“bob”，那么您可以说$('#selectId').val('bob');
我提供的答案只是一个最简单的解决方案...@SpYk3HH 如果您默认选择被禁用，则对其进行修改...。是的，@Felix Kling 已经在上一篇文章中回答了这个问题，所以请看一看..无论如何，谢谢大家。 .:)
为了进一步了解 FelixKling 的解决方案，这里是完整的 jQuery 版本，使用从原始属性中提取的 .attr，而不是从 .prop 中“更改的属性”。
$(document).on('click', '#buttonID', function(e) {
$('#selectID option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected')
});
要进一步固化解决方案，请尝试上述 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，漂亮而简短
$(document).on('click', 'button', function(e) {
var opt = $('select').val(0).children('option').filter(function(i){ return this.hasAttribute('selected') });
opt.prop('selected', 'selected');
});
“到原来的默认值”
你没有说你是如何设置默认值的，但如果默认值是你可以说的第一项：
document.getElementById('selectIdHere').selectedIndex = 0;
// or with jQuery
$("#selectIdHere").prop("selectedIndex", 0);
否则，您可以在 DOM 准备好时保存默认项，并在单击按钮时将其设置回：
$(document).ready(function() {
var $select = $("#selectIdHere");
$select.data("default", $select.val());
$("#buttonIdHere").click(function() {
$select.val($select.data("default"));
});
});
请注意，您可以只在就绪处理程序中使用局部变量，而不是使用 来存储值.data()，但是如果您想对多个元素执行此操作，则使用将默认值直接与使用 的元素关联可能更易于管理.data()。
我建议你看看 DOM 属性defaultSelected。
编辑：
但这真的取决于你的 HTML 标记。defaultSelected要求其中一个<option>具有selected property.
我想您的 HTML 框架，或者您手动地使用“selected”属性从 DropDown 中标记默认选定值。
<select id="myCombo" >
<option >1</option>
<option selected="selected">2</option>
<option >3</option>
</select>
<button id="reset">Reset Select</button>
这个属性不会被用户交互覆盖，只有 JS 可以弄乱这个标志，所以，使用这个属性来“记住”默认值。
$('#reset').click(function(){
var self = $('#myCombo');
self.val(self.find('option[selected]').val());
});
通过这种方式，您不必添加神奇的数据属性，或者您（或下一个开发人员）可能不会记得设置的任何神奇的东西。
你可以在这里试试：
你只需要这样做：
$("#yourresetbutton").on("click", function(){
$("#yourDropDownId").val("default option value");
});
这#resetbutton是重置按钮#yourDropDownId的 id，是下拉菜单的 id，default option value将是默认选择的默认选项的值。
更新 如果你想选择禁用的项目，上面可能不起作用，你可以试试这个：
$("#yourresetbutton").on("click", function(){
$("#yourDropDownId").find("option[val='yourDefaultValue']").attr("selected", "selected");
});
当然，重置按钮可以完成您的工作。