無法在選擇輸入類型的下拉列表中設置可見選項的限制

Question

請在此處查看我的表格。 https://business-sale.com/daily-companies-finance-alerts#dfa-form

正如您在單擊下拉菜單時所看到的，下拉菜單向上（而不是向下）打開並將用戶發送到頁面頂部。 這是有問題的，尤其是如果用戶使用小屏幕。 我認為原因是它有太多選擇。 我的選擇下拉框中有近 1000 個選項。 我想將可見選項限制為 10。並使下拉框可滾動。

我試過這個

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

和

<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;}">

但它不起作用。

對於其余的代碼，請檢查這里

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

如何修復

Answer 1

將此添加到您的腳本中以按照此處的建議進行覆蓋。 這將強制下拉菜單始終為“下拉菜單”。

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

全局默認值也可以被覆蓋。

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

另外，請查看：

• https://developer.snapappointments.com/bootstrap-select/examples/#dropup-menu
• 引導下拉菜單根據屏幕位置自動下拉？

Answer 2

因為我正在使用引導程序選擇； 限制可見選項的解決方法就在這里

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

所以就我而言

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

參考： https : //developer.snapappointments.com/bootstrap-select/examples/