javascript - 触发事件

Question

我有一个目标网站，其中有以下下拉菜单。

<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
  <option value="">default</option>
  <option value="p1" data-href="/callback/p1">P1</option>
  <option value="p2" data-href="/callback/p2">P2</option>
  <option value="p3" data-href="/callback/p3">P3</option>
</select>

当从菜单中选择一个项目时，它会触发一个“change”事件，并在该事件发生时调用一个函数。我已经使用 Chrome 调试了该事件，当我从下拉菜单中选择一个项目时，您可以看到调试输出。我已经从调试器中截取了屏幕截图。

现在，让我解释一下我想要做什么。我使用 JavaScript 函数从下拉菜单中选择一个项目，代码如下:

var id= document.getElementById('level1-option');
setSelectedValue(id, "p2");
$('#level1-option').trigger("select");   

在最后一行中，我尝试触发最初在网页中发生的相同事件，就像我手动选择该项目一样。但是，它不会触发任何东西。 |我在调试输出中看到该事件是由类触发的。我尝试了很多不同的事情但没有成功。有人能解释一下这个问题吗？如何使用 jquery 或 javascript 触发该网页中发生的相同事件？

Answer 1

您的代码:

$('#level1-option').trigger("select");

...将触发一个名为 select 的事件(与表单字段更改的值无关)，但您在调试器中停止的事件是 change，而不是选择:

如果要触发change事件，则触发change事件:

$('#level1-option').trigger("change"); 
// Difference is here -------^

<小时/>

旁注:因为您使用的是 jQuery，所以您的代码可以更简单，您不需要 getElementById 或 setSelectedValue:

$('#level1-option').val("p2").trigger("change");