我需要垂直滚动条来选择框选项列表。我必须只显示列表的前几项。我无法控制列表中的项目数量。
我在这里检查了所有类似的问题,但没有任何结果。无论如何都要这样做吗?
.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>
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提供所需的结果。
尝试这样的操作(将数字 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>
只需在您的选择中添加尺寸属性即可。例如:- 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>
你可以只给出尺寸,它会以某种方式起作用。
<select size="5">
// all your option comes here
</select>
下面的选择配置对我来说效果很好。
$("select").on("focus", function(){
this.size = 5;
});
$("select").on("change", function(){
this.blur();
});
$("select").on("blur", function(){
this.size = 1;
this.blur();
});
select{
position: absolute;
z-index: 9999;
width: 30% !important;
}
<h4>Use the below select config along with the css and js provided</h4>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" onfocus="this.size = 8" onchange="this.blur()" onblur="this.size = 1; this.blur()">
<option selected>--Select--</option>
<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>
.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 multiple 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>