javascript - 如何以编程方式更改选择以触发其 onchange 行为？

Question

这似乎不起作用：

<select id="mySel" onchange="alert('foo')">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<script>
dojo.byId('mySel').value = 'b'; // select changes, but nothing is alerted
</script>

（我正在使用 dojo，但这并不重要。）

Answer 1

'onchange' 名称有点误导，除非您了解更改事件和正在更改的值不是一回事。当用户更改浏览器中的值时，会发生更改事件。dojo.byId('mySel').onchange()不过，我相信您可以通过在以编程方式更改值后调用来手动触发事件。（不过，您可能需要实际定义一个调用 的函数alert。我自己没有这样做。）

Answer 2

这将更改值但不会触发 onchange 事件。任何时候你用 JavaScript 修改元素都不会触发事件（阻止你陷入递归问题*）。

如果您像这样设置事件处理程序。

function myHandler(){
  //do whatever stuff here
  changeColor( dojo.byId('mySel') );
}

那么您可以在以编程方式设置值之后单独调用它。

注意（*）：我不是道场专家......所以我假设当您从 JavaScript 设置值时，他们没有“添加”事件处理程序的自动调用。

Answer 3

对于希望change使用 javascript 触发事件的任何人。

        var evObj = document.createEvent("HTMLEvents");
        evObj.initEvent("change", true, true);
        var elem = document.getElementById('some-id');
        elem.dispatchEvent(evObj);

Answer 4

您可以看看这些问题及其答案：它们可能会有所帮助：

• 检测 html 选择框上的编程更改。
• 如何以编程方式强制输入上的 onchange 事件？（专注于输入，而不是选择，但可能仍然有用）

Answer 5

您可以访问事件“onpropertychange”，它在事件参数中包含一个属性，以识别更改了哪个属性。

它同时检测 'selectedIndex' 和 'value' 的变化——简单的 case test 'propertyName'

<select id="mySel" onpropertychange="dothis(event);">
    <option value="a">a</option>    
    <option value="b">b</option>
</select>

function dothis(event)
{

    if (event.propertyName == "selectedIndex")
            alert('selection changed');
}

我的脑海中浮现...（目前使用的asp.net js框架有很大的不同）

Answer 6

尝试分配 selectedIndex 代替。