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

Question

Please see my form here. https://business-sale.com/daily-companies-finance-alerts#dfa-form

As you can see when you click on the drop-down menu the dropdown menu opens upwards (instead of downwards) and sends the user to the top of the page. Which is problematic especially if the user uses a small screen. I assume the reason is it has too many options. I have nearly 1000s options in my select dropdown box. I want to limit the visible options to 10. And make the drop-down box scrollable.

I have tried this

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

and

<select class="selectpicker" id="sector" name="sector" multiple
        style="height: 10px; overflow-y: scroll;"
        data-live-search="true"
        onmousedown="if(this.options.length>8){this.size=8;}">

But it's not working.

For the rest of the code please check here

https://jsfiddle.net/bashabi/8fqmuyea/5/

How to fix it

Answer 1

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/