如何强制选择下拉菜单向下扩展答案

【问题标题】：How to force select dropdown to expand downwards如何强制选择下拉菜单向下扩展
【发布时间】：2019-05-03 07:14:09
【问题描述】：

我正在使用select 标记从下拉列表中选择选项，但由于项目数量的原因，列表会上升，就好像它的下拉列表一样。我正在使用 Bootstrap。

检查了其他代码，但没有找到任何结果。

 <div class="select-style" style="display: inline-block;">
        <select id="year">
            <option value="hide">-- Year --</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="201">2011</option>
            <option value="2015">2015</option>
            <option value="201">2011</option>
            <option value="202">2012</option>
            <option value="203">2013</option>
            <option value="204">2014</option>
            <option value="205">2015</option>
            <option value="202">2012</option>
            <option value="203">2013</option>
            <option value="204">2014</option>
            <option value="205">2015</option>
        </select>
      </div>

当菜单中有更多选项时，此选项会向上。我希望它往下走。

【问题讨论】：

您好，欢迎来到 SO。请参阅How to ask 并提供Minimal, Complete, and Verifiable example。您能否提供您选择的屏幕截图或完整代码以及预期行为的屏幕截图？
此行为由浏览器控制，取决于select 元素上方/下方的视口高度。您可能需要自定义下拉菜单。
我认为这是因为在选择上方有足够的空间可以适应屏幕，而在它下方则没有。
如何更改它以使其适合下方？

标签： html css

【解决方案1】：

试试<select id="year" size="5">你也可以用css调整高度

【讨论】：

不工作...盒子朝不同的方向移动

【解决方案2】：

你可以像这样使用 CSS

CSS：

#year {
 width:150px;   
}

如果您想更改选项的宽度，可以在您的 css 中执行此操作：

#year option{
  width:150px;   
}

【讨论】：

【解决方案3】：

我找到了一个可以强制向下扩展的解决方案，您可以定义选择的高度。这是小提琴（你需要资源）：JSFiddle

$(function(){
    $('select').chosen({width: '100px'});
    
    $('ul.chosen-results').css('min-height', '100px');
    $('ul.chosen-results').css('max-height', '100px');
});

<select>
  <option value='1'>2010</option>
  <option value='2'>2011</option>
  <option value='1'>2012</option>
  <option value='2'>2013</option>
  <option value='1'>2014</option>
  <option value='2'>2015</option>
  <option value='1'>2016</option>
  <option value='2'>2017</option>
  <option value='1'>2018</option>
  <option value='2'>2019</option>
</select>

【讨论】：

【解决方案4】：

只需使用data-dropup-auto="false"

例子：

<div class="select-style" data-dropup-auto="false" style="display: inline-block;">
    <select id="year">
        <option value="hide">-- Year --</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="201">2011</option>
        <option value="2015">2015</option>
        <option value="201">2011</option>
        <option value="202">2012</option>
        <option value="203">2013</option>
        <option value="204">2014</option>
        <option value="205">2015</option>
        <option value="202">2012</option>
        <option value="203">2013</option>
        <option value="204">2014</option>
        <option value="205">2015</option>
    </select>
  </div>

【讨论】：

这不起作用。尝试在页面滚动的情况下运行 sn-p，使选择器位于页面的下半部分。它仍然上升。 OP 没有指定他们正在使用 Bootstrap。
@RoshanYadav 你在使用 Bootstrap 吗？如果是这样，请尝试使用data-flip="false"，如果仍然不起作用，则必须禁用浏览器翻转下拉菜单的默认行为。
还是一样，是的，我正在使用引导程序