如何更改选项的高度

Question

我有以下代码。问题是有25个选项，这使得选项列表非常长。我想限制选项的高度，只显示5，然后让用户使用垂直滚动条查看其他选项。我在网上尝试了不同的选择，但都不起作用。有人能帮我吗？非常感谢。

<div class="input-group input-group-lg mb-3">    
<input id="Species" type='hidden' name='Species' value=''> 
<select id="select" class="form-select" aria-label=".form-select example">   
<option class="option" value="ex" id="ex">Select a Species</option> 
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option> 
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
<option value="7" id="7">7</option>
<option value="8" id="8">8</option>  
<option value="9" id="9">9</option>
<option value="10" id="10">10</option>
<option value="11" id="11">11</option>                                                           
<option value="12" id="12">12</option>
<option value="13" id="13">13</option>
<option value="14" id="14">14</option> 
<option value="15" id="15">15</option>
<option value="16" id="16">16</option>
<option value="17" id="17">17</option>
<option value="18" id="18">18</option>  
<option value="19" id="19">19</option>
<option value="20" id="20">20</option>
<option value="21" id="21">21</option>
<option value="22" id="22">22</option>
<option value="23" id="23">23</option>  
<option value="24" id="24">24</option>
<option value="25" id="25">25</option>
</select>
<input class="form-control" type="text" id="autocomplete" name="Keyword" placeholder="Type something" data-toggle="tooltip" data-bs-placement="top"> 
<button class="btn btn-success" type="submit" id="search" value="submit">Search</button>
</div>

Answer 1

你可以使用它并对其进行样式设置，但它太多了，所以我建议你使用这个库，它也会为你提供搜索的选项

https://select2.org/

$(document).ready(function() {
$('.dropdown').select2();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="input-group input-group-lg mb-3">
<input id="Species" type='hidden' name='Species' value=''>
<select id="select" class="form-select dropdown" aria-label=".form-select example">
<option class="option" value="ex" id="ex">Select a Species</option>
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option>
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
<option value="7" id="7">7</option>
<option value="8" id="8">8</option>
<option value="9" id="9">9</option>
<option value="10" id="10">10</option>
/// there are 25 options here in total///
</select>

<input class="form-control" type="text" id="autocomplete" name="Keyword" placeholder="Type something"
data-toggle="tooltip" data-bs-placement="top">
<button class="btn btn-success" type="submit" id="search" value="submit">Search</button>
</div>

<div class="input-group input-group-lg mb-3">
<input id="Species" type='hidden' name='Species' value=''>
<select id="select" onfocus='this.size=5;' onblur='this.size=1;' onchange='this.size=1; this.blur();'
class="form-select" aria-label=".form-select example">
<option class="option" value="ex" id="ex">Select a Species</option>
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option>
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
<option value="7" id="7">7</option>
<option value="8" id="8">8</option>
<option value="9" id="9">9</option>
<option value="10" id="10">10</option>
/// there are 25 options here in total///
</select>

<input class="form-control" type="text" id="autocomplete" name="Keyword" placeholder="Type something"
data-toggle="tooltip" data-bs-placement="top">
<button class="btn btn-success" type="submit" id="search" value="submit">Search</button>
</div>

Answer 2

嘿，在select标签中使用size=5道具，它会像你预期的那样工作，你会看到5个选项，然后会有一个垂直滚动条来滚动更多选项。例如：-

<select id="select" size="5" class="form-select" aria-label=".form-select example">   
<option class="option" value="ex" id="ex" >Select a Species</option> 
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option> 
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
<option value="7" id="7">7</option>
<option value="8" id="8">8</option>  
<option value="9" id="9">9</option>
<option value="10" id="10">10</option>
/// there are 25 options here in total///
</select>

Answer 3

试试这个。

<div class="wrapper">
<select id="select" class="form-select" aria-label=".form-select example" onfocus='this.size=11;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
<option class="option" value="ex" id="ex" >Select a Species</option> 
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option> 
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
<option value="7" id="7">7</option>
<option value="8" id="8">8</option>  
<option value="9" id="9">9</option>
<option value="10" id="10">10</option>
<option value="11" id="11">11</option> 
<option value="12" id="12">12</option> 
<option value="13" id="12">13</option> 
<!-- and so on... -->
</select>
</div>

Answer 4

<select size="5"></select>

执行您需要的操作，因为它限制了要显示的选项数量，并在select的选项多于size指定的选项时添加了滚动条。点击此处阅读更多信息：https://www.w3schools.com/tags/att_select_size.asp