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

【问题标题】：Select in Safari doesn't closed automatically after value is set设置值后，Safari 中的选择不会自动关闭
【发布时间】：2020-03-05 13:44:54
【问题描述】：

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

在 Chrome 中，选择的值已设置，选择中的下拉菜单会自动关闭。在 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);

这是重现此行为的 codepen 上的链接： https://codepen.io/annmirosh9/pen/WqNEEq

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

你能告诉我我错过了什么以及如何使这个例子有效吗？

【问题讨论】：

标签： javascript html select safari

【解决方案1】：

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

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

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

【讨论】：