javascript - 在打开时更改下拉列表的内容？

Question

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

可以用 JavaScript 实现吗？如果是这样，怎么做到的？

Answer 1

为了科学!我已经创建了一个替代答案来测试这个。你可以查看this fiddle包含此 HTML:

<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:添加选项无需重新打开 + 调整新选项的宽度