我需要選擇框選項(xiàng)列表的垂直滾動(dòng)條。我只需展示列表的前幾項(xiàng)。我無法控制列表中的項(xiàng)目數(shù)量。

我已經(jīng)檢查了這里所有類似的問題，沒有解決。無論如何要做到這一點(diǎn)？

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

<link rel="stylesheet" >


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

溢出-y對(duì)選擇框不起作用。我建議在你的選擇框中使用大小。在我的例子中，我使用了5作為值，你顯然可以根據(jù)自己的喜好改變它。

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

<link rel="stylesheet" >
    
    
    <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>

嘗試以下方式(將數(shù)字3替換為您想要展示的商品數(shù)量):

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


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

你可以只給尺寸，它會(huì)以某種方式工作。

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

下面選擇的配置對(duì)我來說很好。

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