表单重置按钮是否会触发选择元素 onChange 事件？答案

【问题标题】：Does a form reset button fire a select elements onChange event?表单重置按钮是否会触发选择元素 onChange 事件？
【发布时间】：2010-10-07 12:19:00
【问题描述】：

我有一个带有一些选择元素的表单，这些元素附加了onChange 事件。即使有人单击表单重置按钮，我也希望触发该事件。

我的问题是：重置表单会触发选择元素onChange 事件吗？

这是一个简单的jQuery例子

<script type="text/javascript">
    $('.myselect').change(function() {
        // do something on change
    });
</script>

<form action="/" method="post">
    <select class="myselect" name="select1">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <select class="myselect" name="select2">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <!-- When this is clicked I would like it fire the change event -->
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Save" />
</form>

谢谢！

【问题讨论】：

去测试这个不是更容易吗？
我测试了它，它不起作用。我什至不确定这是否可能，所以这就是我问的原因。把它缩小到我的错误，或者你做不到的事实。
@Powerlord 我不得不说，我一直认为“只是测试它”是一个糟糕的建议。 OP 只会发现某些东西在他/她的浏览器/版本中是否有效。更好的解决方案是遵循官方标准/API 文档。

标签： jquery onchange reset jquery-events

【解决方案1】：

表单有一个 onReset 标签，所以你可以这样做：

<script type="text/javascript">
    var changeFunc = function() {
        // do something on change.
    };
    $('.myselect').change(changeFunc);
</script>

<form onReset="changeFunc()" action="/" method="post">
    <select class="myselect" name="select1">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <select class="myselect" name="select2">
        <option value="1">First</option>
        <option value="2">Second</option>
    </select>
    <!-- When this is clicked I would like it fire the change event -->
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Save" />
</form>

这个方法在重置发生之前被调用，虽然它可能很棘手。我想这样你就可以做一个“你确定吗？”盒子。在重置函数中扔一个setTimeout 似乎可以解决问题。

【讨论】：

【解决方案2】：

Jack M. 的回答效果很好。这是执行相同操作的另一种方法。希望它会对某人有所帮助。

在此函数中间编写您想要调用的代码/事件。我已经对此进行了测试。工作良好。

$(document).ready(function() {
    $("input:reset").click(function() {       // apply to reset button's click event
        this.form.reset();                    // reset the form

        // call your functions to be executed after the reset      

         return false;                         // prevent reset button from resetting again
    });
});

【讨论】：