在打开时更改下拉列表的内容？答案

【问题标题】：Changing content of a dropdown list while it's open?在打开时更改下拉列表的内容？
【发布时间】：2013-09-05 03:45:16
【问题描述】：

我有一个包含一些项目的下拉列表。当用户选择其中一个时，我希望下拉列表保持打开状态并重新填充新项目。然后用户选择其中之一，最后关闭下拉菜单。

可以在 JavaScript 中完成吗？如果有，怎么做？

【问题讨论】：

标签： javascript browser drop-down-menu

【解决方案1】：

为了科学！我创建了一个替代答案来测试这一点。您可以检查包含此 HTML 的this fiddle：

<select id="y">
    <option>click to open dropdown</option>
    <option>do not choose this!</option>
</select>

还有以下 Javascript：

var t = 10;

var x = window.setInterval(function() {
    console.log(--t);
    if (t === 0) { act(); }
}, 1000);

function act() {
    var select = document.getElementById('y');
    var newOption = document.createElement('option');
    newOption.innerHTML = "this option will not appear if the select is open while it's added";
    select.appendChild(newOption);
}

如果您打开下拉列表并保持打开状态直到计时器到期，您将看到以下行为：

✗ Chrome 29：选项在重新打开之前不可见 + 下拉菜单适应新选项的宽度；
✗ IE10/9/8：同 Chrome 29 + 强制折叠打开的下拉菜单
✓ Firefox 23：无需重新打开即可添加选项 + 调整新选项的宽度

【讨论】：

IE 的行为仍然是可以接受的，或者至少，它比 Chrome 的行为更容易让用户感到困惑。有什么解决方法的建议吗？
顺便说一句，我刚刚将其报告为 Chrome 错误。谢谢你的小提琴，它节省了我一些时间。

【解决方案2】：

如果不将本机控件替换为 a custom one，则不然。

【讨论】：

@Thomas 使用 CSS/JavaScript 制作自定义控件 - 在项目的点击处理程序上，您根本不会隐藏选项然后添加其他选项。
下拉列表打开时，javascript 如何更改控件的内容？如果用户不移动鼠标，什么会指示浏览器用新内容重新绘制屏幕？
@Thomas 自定义控件中的选项可能是li 元素，所以只需追加一个即可。我认为您没有正确理解我的建议。