设置选择元素的 selectedindex 与使用鼠标选择一项有何不同？答案

【问题标题】：How is setting the selectedindex of a select element different from selecting one item with a mouse?设置选择元素的 selectedindex 与使用鼠标选择一项有何不同？
【发布时间】：2012-09-19 15:20:12
【问题描述】：

在 html 页面中，如果我使用鼠标从下拉列表中选择一个项目（select 和 option html 元素），则将触发 onchange 事件。但是如果我使用 Javascript 来更改选择元素的selectedindex，则不会触发onchange 事件。

这两个动作有何不同？

如何触发onchange 事件（不是通过显式调用selectElement.onchange()）？

【问题讨论】：

当 DOM 元素的值/属性在 javascript 中被操作时，它们的事件不会被触发。这是为了防止在简单地操作值时调用意外代码。假设您有两个字段，我们会说它们代表百分比。如果您更新一个字段，则另一个字段的值会根据您更新的字段自动更新为 100% 的余数。如果使用 javascript 更改另一个字段的值导致更改事件被触发，您将进入一个无限循环，每个字段都会无休止地更新另一个字段。
因此，如果您想在多个地方重复功能，最佳实践是将其重构为单独的方法。然后，您可以调用该方法onchange，也可以在更改值时手动调用。
另一个例子是当您想要对输入进行自动格式化时（如货币）。用户输入一个值，onchange 被触发，然后您格式化该值并使用格式化结果更新输入的值。如果这样做会触发 onchange 事件，那么您将遇到问题。

标签： javascript html dom dom-events onchange

【解决方案1】：

看到这个：http://jsfiddle.net/9xe9b/

$("#currency").change(function(){
    var val = $(this).val();

    $(this).val(formatCurrency(val));
});

$("#infinite").change(function(){
    var val = $(this).val();

    $(this).val(formatCurrency(val));
    $(this).change(); // simulate the change event. 
});

function formatCurrency(num) {
    num = isNaN(num) || num === '' || num === null ? 0.00 : num;
    return parseFloat(num).toFixed(2);
}

如果您在第二个文本框中输入值并弹出控制台，您将看到以下错误： Uncaught RangeError: Maximum call stack size exceeded

如果更改 javascript 中的值导致相关事件触发，这就是我们必须担心的问题。无限循环！

因此，如果您在通过 UI 或通过 javascript 更改值时需要重复功能，您应该创建一个执行您想要的功能并在适当的实例中调用它的函数。

【讨论】：