twitter-bootstrap 如何添加垂直滚动条以选择框选项列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48560072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add vertical scrollbar to select box options list?
提问by Naresh Shetty
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>回答by Xoog
Overflow-ydoesn't work on select boxes. What I would recommend using is sizeon your select box. In my example I've used 5 as the value, you can obviously change this to your liking.
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>Edit:Amended my answer to include some js to provide OP with the desired result.
编辑：修改我的答案以包含一些 js 以向 OP 提供所需的结果。
回答by Gaza
Try something like this (Replace the number 3 with the number of items you would like to show):
尝试这样的操作（将数字 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>回答by Rupal
Just add size attribute in your select. For ex:- size="5"
只需在您的选择中添加 size 属性。例如：- 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>