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

问题描述 投票:0回答:6

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

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

.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
6个回答
14
投票

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


6
投票

尝试这样的操作(将数字 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>


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>


1
投票

你可以只给出尺寸,它会以某种方式起作用。

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

0
投票

下面的选择配置对我来说效果很好。

$("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>


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.