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

【问题标题】：How to add vertical scrollbar to select box options list?如何添加垂直滚动条以选择框选项列表？
【发布时间】：2018-02-01 10:07:11
【问题描述】：

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

我在这里检查了所有类似的问题，但没有任何结果。无论如何要这样做？

.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>

【问题讨论】：

标签： javascript jquery css html twitter-bootstrap

【解决方案1】：

Overflow-y 不适用于选择框。我建议在您的选择框中使用size。在我的示例中，我使用 5 作为值，您显然可以根据自己的喜好进行更改。

.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 提供所需的结果。

【讨论】：

添加大小属性使它像多选框。我想保持选择框默认样式..只有那个下拉列表应该有那个滚动条
@NareshShetty 更改了我的答案，为您提供所需的内容。想不出任何其他方式来做到这一点。 :)
This causes reflow of whole page when select changes height.

【解决方案2】：

尝试这样的事情（将数字 3 替换为您要显示的项目数）：

    <select onfocus='this.size=3;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
    </select>

【讨论】：

OnFocus 我也不想更改选择框的默认行为。我只希望该选项列表具有滚动条，不适用于选择框
这是选择框出现这种行为的唯一方式。

【解决方案3】：

只需在您的选择中添加尺寸属性。例如：- size="5"

.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 size="5" 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>

【讨论】：

添加大小属性使其像多选框。我想保持选择框默认样式..只有那个下拉列表应该有那个滚动条
然后你可以在 jquery 中使用 select2 writen，它和 select 一样，你也可以指定滚动。 select2.org/getting-started/basic-usage

【解决方案4】：

你可以给出 size ，它会以某种方式工作。

 <select size="5">
 // all your option comes here
</select>

【讨论】：