我有以下代碼。問題是有 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>uj5u.com熱心網友回復：
您可以使用它并對其進行樣式設定，但是這樣做太多了我建議您使用這個庫它還可以讓您選擇搜索
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/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
嘿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>
uj5u.com熱心網友回復：
嘗試這個。
<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>uj5u.com熱心網友回復：
<select size="5"></select>做你需要的
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/490365.html