javascript - 模拟人类在选择菜单中选择选项

Question

我有一些技术上可行的脚本。它本质上是监听 URL 上的主题标签，并使用与主题标签匹配的选项值更新选择菜单。它在页面加载时工作，不关心主题标签如何更新，只关心它是如何更新的。完美

问题是，我在该页面上有很多其他脚本，当您选择一个选项项时，它们会执行某些操作，当您手动选择一个选项项时，它们都会起作用，但当我使用下面的脚本自动时，不会触发任何内容选择选项。在这种情况下我怎样才能真正模拟人类的选择呢？有任何想法吗？

$( document ).ready(function() {
	window.addEventListener('hashchange', fn, false);
	window.onload = fn; // fire on pageload
	function fn() {
    document.getElementById('select-two').value =
    window.location.hash.replace('#','');
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-two" name="colordrop" class="color2" onchange="letsDoThis()">
  <option value="Jet" class="jet">Jet</option>
  <option value="Cream" class="cream">Cream</option>
  <option value="Chocolate" class="chocolate">Chocolate</option>
  <option value="Classic Red" class="classic_red">Classic Red</option>
</select>

这是我的 JSFiddle，尽管不确定如何在 JSFiddle 中演示主题标签。 https://jsfiddle.net/liquilife/n9r6af7e/1/

这个问题已经解决了。我已将答案标记为完整。最终有效的代码如下:

$( document ).ready(function() {  
	window.addEventListener('hashchange', fn, false);
	window.onload = fn; // fire on pageload
	function fn() {
    $("#select-two").val(window.location.hash.replace('#','')).trigger("change");
	}
});

Answer 1

由于您使用的是 jQuery，因此您可以使用 .trigger(eventName) 方法在元素上启动特定事件。

例如，您可以设置值并使事件触发，如下所示:

$("#select-two").val(window.location.hash.replace('#','')).trigger("change");