我将如何控制下拉选择菜单的位置？答案

【问题标题】：How would I control the position of a drop down select menu?我将如何控制下拉选择菜单的位置？
【发布时间】：2013-10-27 19:09:00
【问题描述】：

我有一个下拉选择菜单，我想知道是否有办法控制选项扩展的方式？默认值似乎是两种方式，取决于列表中有多少项目。

我想阻止下拉选项显示在其他表单字段上方。当您从列表中选择“国家”时，菜单会向下扩展（我想要的位置），但是当您从“州/地区”字段中选择一个选项时，该选项有很多不同的选择（例如英国），菜单向上扩展并覆盖其他表单字段，这是我不想要的。无论如何要解决这个问题？

这是我的 CSS ----->

#country {
    position:relative;
    background-image:url(../images/drop-down-selector.svg);
    background-position:260px, center;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:0px 0px 0px 1px #b5e7ff;
    border:none;
    outline:none;
    left:2px;
    width:292px;
    height:47px;
    font-size:1.5em;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
    color:#5fccff;
    border-radius:0;
}

#state {
    position:relative;
    background-image:url(../images/drop-down-selector.svg);
    background-position:260px, center;
    background-repeat:no-repeat;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-shadow:0px 0px 0px 1px #b5e7ff;
    border:none;
    outline:none;
    left:2px;
    width:292px;
    height:47px;
    font-size:1.5em;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-medium.otf");
    color:#5fccff;
    border-radius:0;
}

附加代码----->

<select name="Country" id="country">
    <option value="">-Country-</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Canada">Canada</option>
    <option value="Australia">Australia</option>
    <option value="Brazil">Brazil</option>
    <option value="France">France</option>
    <option value="Italy">Italy</option>
    <option value="New Zealand">New Zealand</option>
    <option value="South Africa">South Africa</option>
</select>

【问题讨论】：

你能做一个 jsfiddle.net 或者添加更多代码让我做一个小提琴吗？
如果您在谈论<select> 标签，请使用替换它的插件。 IE 在处理<select> 时尤其困难，这就是开发许多插件的原因。您几乎无法更改浏览器的默认行为
乔希，我添加了 HTML。

标签： javascript jquery html css

【解决方案1】：

您无法控制下拉扩展方向。这是浏览器计算出来的。也许您可以尝试一些解决方法。制作自己的自定义下拉系统？也许有一个假选择框，第二个下拉菜单位于其他地方。或与其他解决方案一起避免您的问题

【讨论】：

【解决方案2】：

浏览器通常控制下拉选项框的位置。通常，如果有足够的空间向下显示它，它就会这样做。它上升是因为下面没有足够的空间。

一种解决方案是通过使用允许这样做的下拉列表插件来控制选项框的高度。类似选择的东西：http://harvesthq.github.io/chosen/。但是，这仍然不能保证选项框会一直关闭。比如输入框就在页面底部，那么选项框应该放在哪里？

另一种解决方案是将下拉列表替换为自动完成列表（例如 jquery ui 自动完成），选项更少。它也可能会改善用户体验:)。

【讨论】：