无法在 select 输入类型的下拉列表中设置可见选项的限制
Unable set the limit of visible options in the dropdown of a select input type
请在此处查看我的表格。 https://business-sale.com/daily-companies-finance-alerts#dfa-form
如您所见,当您单击下拉菜单时,下拉菜单会向上(而不是向下)打开并将用户带到页面顶部。这是有问题的,尤其是当用户使用小屏幕时。我认为原因是它有太多选择。我的 select 下拉框中有近 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/
如何修复
将此添加到您的脚本以按照建议覆盖 here。这将强制下拉列表始终为 "drop-down".
$('.selectpicker').selectpicker({
dropupAuto: false
});
也可以覆盖全局默认值。
$.fn.selectpicker.Constructor.DEFAULTS.dropupAuto = false;
另外,查看:
- https://developer.snapappointments.com/bootstrap-select/examples/#dropup-menu
- bootstrap drop-down menu auto dropup according to screen position?
因为我正在使用 bootstrap select;限制可见选项的解决办法就在这里
<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/
请在此处查看我的表格。 https://business-sale.com/daily-companies-finance-alerts#dfa-form
如您所见,当您单击下拉菜单时,下拉菜单会向上(而不是向下)打开并将用户带到页面顶部。这是有问题的,尤其是当用户使用小屏幕时。我认为原因是它有太多选择。我的 select 下拉框中有近 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/
如何修复
将此添加到您的脚本以按照建议覆盖 here。这将强制下拉列表始终为 "drop-down".
$('.selectpicker').selectpicker({
dropupAuto: false
});
也可以覆盖全局默认值。
$.fn.selectpicker.Constructor.DEFAULTS.dropupAuto = false;
另外,查看:
- https://developer.snapappointments.com/bootstrap-select/examples/#dropup-menu
- bootstrap drop-down menu auto dropup according to screen position?
因为我正在使用 bootstrap select;限制可见选项的解决办法就在这里
<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/