如何在更改下拉列表后设置默认值？

Question

我在html页面上有一个下拉列表，当它第一次加载时，它被设置为默认值。 但是当用户更改值时，我希望能够通过单击按钮将下拉列表设置回原始默认值。

我怎样才能做到这一点？没有在隐藏字段中保留原始值的副本..它就像javascript重置表单功能..但我只是想要它只适用于下拉..

由于

Answer 1

考虑到你有一个简单的选择框..你可以使用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
});

fiddle here

但是，如果默认选项为disabled，那么您需要一个解决方法来进行分配。有点像这样：

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

jsFiddle

请注意，您可以更改$('#selectId').val(0);的值以满足您自己的需求。例如，如果第3个选项是您的默认值并且值为'bob'，那么您可以说$('#selectId').val('bob');

我提供的答案只是一个最简单的解决方案... @ SpYk3HH修改了它，如果你默认选择被禁用....并且是@Felix Kling已在上一篇文章中回答了这个问题here所以看看..一直感谢你们.. :)

---

通过jQuery for Cross Compat

使用属性的解决方案

为了进一步了解FelixKling的解决方案，这里是完整的jQuery版本，使用.attr从原始属性中提取而不是从.prop中“更改属性”。

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

jsFiddle Example

---

Combo Breaker <！/ H2>

要进一步巩固解决方案，请尝试上述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评论，好看又简短

$(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

  

“到原始默认值”

您没有说明如何设置默认值，但如果默认值是您可以说的第一项：

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"));
    });
});

请注意，您可以在ready处理程序中使用局部变量，而不是使用.data()存储该值，但是如果您想为多个元素执行此操作，则使用关联可能更易于管理默认使用.data()直接使用元素。

Answer 3

我建议你看一下DOM属性defaultSelected。

修改 但这实际上取决于您的HTML标记。 defaultSelected要求<option>中的一个拥有selected property。

Answer 4

你只需要这样做：

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

此处#resetbutton是重置按钮的ID，#yourDropDownId是下拉列表的ID，default option value将是默认选中的默认选项的值。< / p>

<强>更新 如果你想要选择禁用的项目，以上可能不起作用，你可以试试这个：

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

Answer 5

我认为您的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());
});

通过这种方式，您不必添加魔法数据属性，或者您（或下一个开发人员）可能无法记住设置的任何神奇的东西。

你可以在这里试试：

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

Answer 6

当然，重置按钮可以完成你的工作。