以编程方式更改 html 选择下拉菜单后，onchange 不会触发

Posted 2023-02-16

【中文标题】以编程方式更改 html 选择下拉菜单后，onchange 不会触发

【英文标题】：onchange wont fire after programmatically changing html select dropdown

【发布时间】：2012-10-18 16:02:28

【问题描述】：

我在 html 中有一个选择

<select id="league" name="league">

我正在监听我的 javascript 中的变化。

var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt)  //do stuff 

效果很好。 但是我有一个链接，我可以点击它来更新选择：

<a href=javascript:void(0) onclick="updateSelection(league);"> League </a>

该链接在使用以下函数更新选择的选定值时起作用。

function updateSelection(NewLeague)
dojo.byId('league').value = NewLeague;  // works
dojo.byId('league').onChange;   //this isnt working
//dojo.byId('league').onChange();  //this throws: TypeError: dojo.byId("league").onChange is not a function 

我的问题是，我已经阅读了其他堆栈帖子，以编程方式更新值不会触发 onChange，因此我需要在代码中调用 onchange（如上所示）。根据内联的 cmets，不会触发 onChange 或引发错误。我的第一个想法是它与监听 onChange 的 dojo.Connect 有关，但我没有找到任何信息表明我不能这样做，也没有任何解释如何绕过它。

有什么想法吗？

【问题讨论】：

dojo.byId('league').onChange();这行得通吗？

@RickCalder 不，它会抛出“不是函数”错误

不相关：尝试设置<button> 的样式，而不是使用旧的<a href="javascript:void(0)"> hack。

【参考方案1】：

Select onchange 不会因程序更改而触发，您需要自己使用 league.onchange(); 触发它

正如@Greg 所说，调用应该是小写的。

另外，我不知道dojo是否有触发方法，但在jQuery中这将作为jQuery('#league').trigger('change')完成。

根据您的 dojo 版本，您可能还需要检查：http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html

【讨论】：

您的解决方案全是小写并且OP的调用是混合大小写的事实是这个问题的症结所在。您应该在回答中指出这一点。

@Greg 抱歉，我在 updateSelection 中也尝试过小写。出于某种原因，我必须在 dojo.Connect 中拼写 onchange 小写字母，否则它不会捕捉到它

@Bob 谢谢，但即便如此，我仍然会收到 not a function 错误。

谢谢，我会接受这个作为答案，因为我确信它可以解决问题——但不是我的情况。我最好的猜测是我的问题与我如何连接到 onchange 事件有关，并且试图在另一个级别触发它的函数不起作用。

【参考方案2】：

您是否尝试过使用普通 js 通过它的 id 调用选择？

document.getElementById('league').onchange.call();

【参考方案3】：

正如其他人所说，您需要自己触发事件，仅设置值不会这样做。请参阅How to trigger event in JavaScript? 上的代码以了解如何以跨浏览器的方式进行。