设置值后，Safari中的选择不会自动关闭

Question

我在页面上有一个HTML选择。我有一个超时功能，可以在其中设置此选择元素的值。我的问题是，如果用户在超时功能运行之前打开此选择，则无法在其中设置值。

在Chrome中，设置了select的值，并且select中的下拉菜单自动关闭。在Safari中，未设置的选择，下拉菜单也永远不会关闭。

这是我的HTML：

<select id="mySelect">
    <option value="-">-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

这是我的js：

setTimeout(function () {
    console.info('in timeout');
    var select = document.getElementById("mySelect");
    document.getElementsByTagName('body')[0].click();
    select.value = "3";
    select[3].click();
    console.info('in timeout end');
}, 7000);

这是在代码笔上的链接，可重现此行为：https://codepen.io/annmirosh9/pen/WqNEEq

我在Safari 12.0.3版中进行了测试，如果在加载页面后立即打开下拉菜单，则下拉菜单将永远不会关闭，并且在那里也不会设置值。

您能告诉我我错过了什么以及如何使该示例起作用吗？

Answer 1

此解决方案似乎有效。替换select [3] .click（）;具有以下内容：

select.dispatchEvent(new Event("change", { bubbles: true }));

基于https://stackoverflow.com/a/48775667的答案。