How to Limit the Visible Options in an HTML <Select> Dropdown

Unable set the limit of visible options in the dropdown of a select input type

As i am using bootstrap select; The solution of limiting the visible option lies here

<select class="selectpicker" data-size="5">
  ...
</select>

So in my case

 <select class="selectpicker" id="sector" name="sector" multiple
        style="height: 10px; overflow-y: scroll;"
        data-live-search="true"
        data-size="10">

Reference : https://developer.snapappointments.com/bootstrap-select/examples/

Limiting options in select dropdown to a specific number

HTML Code

<select onmousedown="if(this.options.length>15){this.size=15;}" onchange='this.size=0;' onblur="this.size=0;">
 <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>
 <option>21</option>
 <option>22</option>
 <option>23</option>
 <option>24</option>
 <option>25</option>
</select>

Please check the working fiddle:
Demo

How to Limit the option size within 10

Referring to this answer:

<select onfocus='this.size=10;' onblur='this.size=1;'         onchange='this.blur();'>  <option>option a</option>  <option>option b</option>  <option>option c</option>  <option>option d</option>  <option>option e</option>  <option>option f</option>  <option>option g</option>  <option>option h</option>  <option>option i</option>  <option>option j</option>  <option>option k</option>  <option>option l</option>  <option>option m</option>  <option>option n</option>  <option>option o</option>  <option>option p</option>  <option>option q</option>  <option>option r</option></select>

How do I limit the number of options displayed in an HTML Select element dropdown menu?

Sadly, you can't change the item's that the dropdownlist displays, it is decided by the browser, with the size option it will loose its 'dropdownlist' form, and turn more into a list.

You could try finding some Jquery dropdown list, they are usually editable to whatever you want.

Limit displayed options in a dropdown using css

Add a class to the selects you want to change:

<select class="limit">
...
</select>

Then using some jQuery:

$('.limit').attr('size', 5);

Here's an example.