Question

我有一个表单，其中一些选择元素附有 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>

谢谢！

Answer 1

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

Answer 2

表格有一个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似乎能解决问题。

友情链接