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>

我认为这可以帮到你

选择后选择下拉列表不关闭

3 个答案: