我在 html 页面上有一个下拉菜单，当它第一次加载时，它被设置为默认值。 但是当用户更改值时，我希望能够通过单击按钮将下拉菜单设置回原始默认值。
我怎样才能做到这一点？没有在隐藏字段中保留原始值的副本..它就像 javascript 重置表单功能的方式..但我只是希望它只应用于下拉列表..
谢谢
【问题讨论】：
标签： javascript jquery html
考虑到您有一个简单的选择框..您可以使用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 已经在之前的帖子here 中回答了这个问题，所以有看看..无论如何谢谢大家..:)
为了进一步了解 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');
});
【讨论】：
.val('value') 以满足需求
"恢复到原来的默认值"
你没有说你是如何设置默认值的，但是如果默认值是你可以说的第一项：
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。
【讨论】：
你只需要这样做：
$("#yourresetbutton").on("click", function(){
$("#yourDropDownId").val("default option value");
});
这里#resetbutton 是您的重置按钮的ID，#yourDropDownId 是您的下拉菜单的ID，default option value 将是默认选择的默认选项的值。
更新 如果你想选中禁用的项目，上面的可能不行，你可以试试这个：
$("#yourresetbutton").on("click", function(){
$("#yourDropDownId").find("option[val='yourDefaultValue']").attr("selected", "selected");
});
【讨论】：
我想你的 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());
});
通过这种方式，您不必添加神奇的数据属性，或者您（或下一个开发人员）可能不记得设置的任何神奇的东西。
你可以在这里试试：
【讨论】：
当然，重置按钮可以完成您的工作。
【讨论】：