在下拉列表打开时更改其内容?

发布于 2024-10-23 20:41:26 字数 114 浏览 2 评论 0原文

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

可以用 JavaScript 完成吗?如果是这样,怎么办?

I have a dropdown list populated with some items. When the user selects one of them, I would like the dropdown list to stay open and be repopulated with new items. The user then selects one of these and finally the dropdown closes.

Can it be done in JavaScript? And if so, how?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

情深如许 2024-10-30 20:41:26

为了科学!我创建了一个替代答案来测试这一点。您可以检查包含以下 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:无需重新打开即可添加选项 + 调整新选项的宽度

For science! I've created an alternative answer to test this. You can check this fiddle that contains this HTML:

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

And the following 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);
}

If you open the dropdown and keep it opened until the timer expires, you will see the following behavior:

  • ✗ Chrome 29: option not visible until reopen + dropdown accomodates for width of new option;
  • ✗ IE10/9/8: same as Chrome 29 + it forcibly collapses the opened dropdown
  • ✓ Firefox 23: adds option without need for reopen + adjusts width for new option
じее 2024-10-30 20:41:26

必须用自定义控件替换本机控件。

Not without replacing the native control with a custom one.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文