使用Jquery重置选择框

Question

我在使用jQuery重置选择框的值时遇到了困难。 我的代码如下：

HTML：

<form id="myform">
  <select name="myselect" id="myselect" value=""> 
    <option value="">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

使用Javascript：

​$("#myform .reset").click(function() {
    $('#myselect').attr('value','');
    alert($('#myselect').attr('value'));
});​

如您所见，选择了选项2，但我想将选择框重置为“默认”。 我尝试了各种各样的方法，包括attr-> selectedIndex，但都有相同的效果，它会暂时更改为Default（如果你弹出“Alert box”时看到表单可以看到，但是一旦警告框出现关闭，或删除警报线，它会跳回当前选定的选项2。

我认为这可能是一个jQuery错误，我已经尝试了许多不同的版本，从1.6到边缘，都具有相同的效果。

为了方便起见，我添加了一个jsfiddle： http ： //jsfiddle.net/ux2f2/1/

希望我已经包含了所有内容，因为这是我的第一篇文章，但我很长一段时间读者:)喜欢这个网站！

Answer 1

您不需要任何JavaScript来重置这个简单的表单。 只需使用（X）HTML中选择的属性即可

<form id="myform">
  <select name="myselect" id="myselect" value=""> 
    <option selected="selected">Default</option>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>  
  <input type="submit" value="Go">
  <input type="reset" class="reset" value="Reset form">  
</form>

如果你真的想使用jQuery，我们可以这样做：

$("#myform .reset").click(function() {
    $('#myselect').prop('selectedIndex', -1);
});

值“-1”表示“重置”

Answer 2

正如Kolink所解释的那样，“重置”类型的输入是问题的原因，因为它将整个表单重置为其默认值。

最快的解决方案是改变

<input type="reset" class="reset" value="Reset form">

至

<input type="button" class="reset" value="Reset form">

或者只是使可点击的锚点或div成为重置的触发器而不是输入

这样您就不需要对jQuery进行任何更改

Answer 3

主要问题是重置按钮在您单击它并查看警报后重置该表单。 您需要取消默认事件。 但是，你也可以尝试vanilla JS：

// add id="reset" to the reset button's HTML, then...
document.getElementById('reset').onclick = function() {
    mysel = document.getElementById('myselect');
    mysel.selectedIndex = 0;
    alert(mysel.value);
    return false;
}

更新小提琴

Answer 4

你应该使用类似的东西：

$("select#myselect").val('').attr('selected', true);

以上工作小提琴： http ： //jsfiddle.net/gsN9d/

作为替代（“prop”的新语法）使用：

$("select#myselect").val('').prop('selected', true);