Question

我有一些技术上有效的脚本。它基本上侦听URL上的＃标签，并使用与主题标签匹配的选项值更新选择菜单。它适用于页面加载，并不关心主题标签的更新方式，只关注它。完美

问题是，我在该页面上有很多其他脚本，当你选择一个选项时它会起作用，当你手动选择一个选项时它们都可以工作，但当我使用下面的脚本自动时什么都没有被触发选择选项。如何在此设置中实际模拟人类选择？有任何想法吗？

＆＃13;

$( 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('#','');
	}
});

＆＃13;

<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>

＆＃13;

这是我的JSFiddle，虽然不知道如何在JSFiddle中演示主题标签。 https://jsfiddle.net/liquilife/n9r6af7e/1/

这已经解决了。而且我已经将答案标记为完整。最终的代码如下：

＆＃13;

$( 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");
	}
});

＆＃13;

Answer 1

由于您正在使用jQuery，因此可以使用.trigger（eventName）方法在元素上启动特定事件。

例如，你可以设置值并导致事件像这样触发：

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

Answer 2

您可以使用jQuery的change函数来检测select元素的选定值何时发生更改，并在发生这种情况时执行代码。

more specialized than

在选择菜单

2 个答案: