Question

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

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

提前致谢

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Overflow-y不会对选择框起作用。我建议您在选择框中使用size。在我的例子中，我使用5作为值，你显然可以根据自己的喜好改变它。

＆＃13;

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

＆＃13;

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

＆＃13;

修改：修改了我的回答，包括一些js，为OP提供所需的结果。

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

您只需提供size，它将以某种方式起作用。

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

Answer 4

只需在您的选择中添加尺寸属性即可。例如： - 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>

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

4 个答案: