如何添加垂直滚动条以选择框选项列表？

问题描述

我需要垂直滚动条来选择框选项列表。我只需要显示列表的前几个项目。我无法控制列表中的项数。

I need vertical scrollbar for select box options list. I have to show only first few items of the list. I don't have any control over number of items in the list.

我在这里检查了所有类似的问题，但没有解决。

I have checked all similar questions here and nothing worked out. Anyway to do that?

.wrapper{
width:200px;
padding:20px;
height: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="wrapper" ><select name="" id="" class="form-control">
        <option value="">One</option>
        <option value="">Two</option>
        <option value="">Three</option>
        <option value="">Four</option>
        <option value="">Five</option>
        <option value="">Six</option>
        <option value="">Seven</option>
        <option value="">Eight</option>
        <option value="">Nine</option>
        <option value="">Ten</option>
    </select></div>

推荐答案

溢出-y 在选择框上不起作用。我建议您在选择框中使用 size 。在我的示例中，我使用5作为值，显然您可以根据自己的喜好将其更改。

Overflow-y doesn't work on select boxes. What I would recommend using is size on your select box. In my example I've used 5 as the value, you can obviously change this to your liking.

.wrapper{
width:200px;
padding:20px;
height: 150px;
}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    
    <div class="wrapper"><select name="" id="" class="form-control" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
    <option value="">One</option>
    <option value="">Two</option>
    <option value="">Three</option>
    <option value="">Four</option>
    <option value="">Five</option>
    <option value="">Six</option>
    <option value="">Seven</option>
    <option value="">Eight</option>
    <option value="">Nine</option>
    <option value="">Ten</option>
</select></div>

编辑：：修改了我的答案，添加了一些js，以便为OP提供所需的结果。

Amended my answer to include some js to provide OP with the desired result.

这篇关于如何添加垂直滚动条以选择框选项列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！