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-＆gt; 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;
}

Updated Fiddle

Answer 4

你应该使用类似的东西：

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

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

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

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

使用Jquery重置选择框

4 个答案: