无法在选择输入类型的下拉列表中设置可见选项的限制

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/