7

我在使用 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，但都具有相同的效果，它会短暂更改为默认值（如果您在“警报框”弹出时查看表单可以看出，但只要警报框被关闭，或者警告线被移除，它会跳回到当前选择的选项 2。

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

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

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

4

4 回答 4

7

您不需要任何 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”，表示“重置”

于 2012-10-22T13:16:35.970 回答
2

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

最快的解决方案是改变

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

到

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

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

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

于 2012-10-22T13:18:51.927 回答
1

主要问题是重置按钮在您单击它并看到警报后重置表单。您需要取消默认事件。但是，您也可以尝试 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;
}

更新小提琴

于 2012-10-22T13:07:49.537 回答
0

你应该使用类似的东西：

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

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

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

$("select#myselect").val('').prop('selected', true);
于 2012-10-22T13:08:09.670 回答