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

Maybe not related, but that page is throwing an error when clicking the dropdown: `dropdowntoggle.js:1 Uncaught TypeError: Cannot read property 'style' of null at toggleDropDown (dropdowntoggle.js:1) at HTMLDivElement.onclick (VM149 daily-companies-finance-alerts:174)` — Samuel Goldenbaum, Dec 03 '19 at 20:10
Since you're using bootstrap why not use their custom dropdown ? [refer to this answer](https://stackoverflow.com/a/43863487/7148391) — Rainbow, Dec 03 '19 at 22:14

score 2 · Accepted Answer · answered Dec 04 '19 at 15:47

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/

score 0 · Answer 2 · answered Dec 03 '19 at 20:09

0

Add this to your script to override as suggested here. This will force the dropdown to always be a "drop-down".

$('.selectpicker').selectpicker({
    dropupAuto: false
});

The global default can be overridden as well.

$.fn.selectpicker.Constructor.DEFAULTS.dropupAuto = false;

Also, check out:

answered Dec 03 '19 at 20:09

Mr. Polywhirl

42,981
12
84
132

Thank you. added the script but still drops up. not drop down. – Bashabi Dec 03 '19 at 20:33
@Bashabi I literally threw it at the end of your JSFiddle example and re-ran it and it worked. – Mr. Polywhirl Dec 03 '19 at 20:53
in the js fiddle, it always drops down. Even without the script. Probably because of the screen position. – Bashabi Dec 03 '19 at 21:01
In the select .bootstrap .js its set up as - dropupAuto: !0, – Bashabi Dec 03 '19 at 21:03
@Bashabi In JavaScript, `!0` is `true`... it's a fancy way to spare typing two more letters. You need to override it to `false` or `!!0` ;) – Mr. Polywhirl Dec 03 '19 at 21:18

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

2 Answers2