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

【问题标题】：Unable set the limit of visible options in the dropdown of a select input type无法在选择输入类型的下拉列表中设置可见选项的限制
【发布时间】：2020-03-28 13:52:01
【问题描述】：

请在此处查看我的表格。 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/

如何解决

【问题讨论】：

可能不相关，但该页面在单击下拉列表时抛出错误：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)
既然您使用的是引导程序，为什么不使用他们的自定义下拉菜单？ refer to this answer

标签： javascript css select html-select dropdownbox

【解决方案1】：

因为我正在使用引导选择；限制可见选项的解决方案就在这里

<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/

【讨论】：

【解决方案2】：

将此添加到您的脚本中以按照建议的here 覆盖。这将强制下拉菜单始终为“下拉菜单”。

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

也可以覆盖全局默认值。

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

另外，请查看：

【讨论】：

谢谢。添加了脚本，但仍然掉线。不下拉。
@Bashabi 我真的把它扔到了你的 JSFiddle 示例的末尾，然后重新运行它并且它起作用了。
在 js 小提琴中，它总是下降。即使没有剧本。可能是屏幕位置的原因。
在选择 .bootstrap .js 中设置为 - dropupAuto: !0,
@Bashabi 在 JavaScript 中，!0 是 true... 这是一种省去再输入两个字母的好方法。您需要将其覆盖为 false 或 !!0 ;)