I have the following code. The problem is there are 25 options which makes the options list very long. I want to limit the height of the option and show only 5 then let the user use a vertical scroll bar to see others. I tried different options online but none of them worked. Can someone help me with it? Thank you!
<div >
<input id="Species" type='hidden' name='Species' value='' >
<select id="select" aria-label=".form-select example">
<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 type="text" id="autocomplete" name="Keyword" placeholder="Type something" data-toggle="tooltip" data-bs-placement="top">
<button type="submit" id="search" value="submit">Search</button>
</div>CodePudding user response：
you can use this and style it but its too much to do so what would i suggest you use this library it also will give you option to search
$(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 >
<input id="Species" type='hidden' name='Species' value=''>
<select id="select" aria-label=".form-select example">
<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 type="text" id="autocomplete" name="Keyword" placeholder="Type something"
data-toggle="tooltip" data-bs-placement="top">
<button type="submit" id="search" value="submit">Search</button>
</div><div >
<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();'
aria-label=".form-select example">
<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 type="text" id="autocomplete" name="Keyword" placeholder="Type something"
data-toggle="tooltip" data-bs-placement="top">
<button type="submit" id="search" value="submit">Search</button>
</div>CodePudding user response：
Hey use size=5 props in select tag and it would work as you are expecting and you will have 5 options visible and then there will be a vertical scroll bar to scroll for more options. For example :-
<select id="select" size="5" aria-label=".form-select example">
<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>
CodePudding user response：
Try this.
<div >
<select id="select" aria-label=".form-select example" onfocus='this.size=11;' onblur='this.size=1;' onchange='this.size=1; this.blur();'>
<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>CodePudding user response：
<select size="5"></select>
does what you need, as it limits the number of options to be displayed and adds a scroll bar if the select has more options than specified by size. Read more here: https://www.w3schools.com/tags/att_select_size.asp