Select 选择后下拉列表未关闭

Question

我的问题是，当我单击列表中的任何项目时，下拉列表不会自动填充并且列表不会关闭。

HTML 下拉列表代码：

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    <option>dasd</option>
    <option>asdaaadsdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
</select>

Fiddle link.

Answer 1

看起来您正在尝试通过使用 JS 和 CSS 重新创建一个已经存在的功能，而一些不错的旧时尚 HTML 会为您做这件事。删除多余的脚本和样式，只需使用：

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options'>
    <option>dasd</option>
    <option>asdaaadsdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
    <option>asdasdasd</option>
</select>

请注意，我删除了 size="10" 和 style='display:none;' 部分。浏览器会处理诸如打开和关闭选项列表、向下箭头等的事情。

Answer 2

将此添加到您的脚本中

$("#options option").click(function(){
    $("#choose").text($(this).text());
    $(this).parent().hide();
});

Answer 3

<select id='options'>
    <option value="0">--Select Options--</option>
    <option>abc</option>
    <option>bcd</option>
    <option>cde</option>
    <option>def</option>
    <option>efg</option>
    <option>fgh</option>
    <option>ghi</option>
    <option>hij</option>
    <option>ijk</option>
    <option>jkl</option>
</select>

我想这对你有帮助

Select 选择后下拉列表未关闭

Select dropdown list not closing after selection

javascript

jquery

html

drop-down-menu

html-select