javascript 我将如何控制下拉选择菜单的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19622231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would I control the position of a drop down select menu?
提问by Marlon Fowler
I have a drop down select menu, and I wanted to know if there is a way to control the way in which the options expand? The default seems to go either way and depends on how many items are in the list.
我有一个下拉选择菜单，我想知道是否有办法控制选项展开的方式？默认似乎是两种方式，取决于列表中有多少项目。
I would like to prevent the drop down options from displaying up and over the other form fields. When you select 'country' from the list, the menu expands downward (where I want it), but when you select an option from the 'state/region' field that has quite a few different choices (such as the UK) the menu expands up and over the other form fields, something I don't want. Anyway to fix this?
我想防止下拉选项在其他表单字段上方显示。当您从列表中选择“国家/地区”时，菜单会向下扩展（我想要的位置），但是当您从“州/地区”字段中选择一个选项时，该选项有很多不同的选择（例如英国）向上扩展并覆盖其他表单字段，这是我不想要的。有任何解决这个问题的方法吗？
Here is my CSS ----->
这是我的 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;
}
Additional code ----->
附加代码 ----->
<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>
采纳答案by jaredrada
You cannot control the drop down expansion direction. This is something the browser calculates. Perhaps you can try making some workaround. Make your own custom dropdown system? Maybe have a fake select box with a second dropdown positioned elsewhere. Or avoid your problem all together with someother soluti
您无法控制下拉扩展方向。这是浏览器计算出来的。也许你可以尝试做一些解决方法。制作自己的自定义下拉系统？也许有一个假的选择框，第二个下拉菜单位于其他地方。或者与其他解决方案一起避免您的问题
related: How can I control the expansion direction of a drop-down list?
回答by pax162
The browser usually controls the position of the option box of a drop down. Normally, if there is enough room to display it downwards, it will do so. It goes up because there is not enough room below.
浏览器通常控制下拉选项框的位置。通常情况下，如果有足够的空间向下显示它，它就会这样做。它上升是因为下面没有足够的空间。
A solution would be to control the height of the option box, by using a drop-down list plugin which allows this. Something like chosen: http://harvesthq.github.io/chosen/. However, this will still not guarantee that the option box will always go down. For example, if the input box is just at the bottom of the page, where should the option box go?
一种解决方案是通过使用允许此操作的下拉列表插件来控制选项框的高度。像选择的东西：http: //harvesthq.github.io/chosen/。但是，这仍不能保证选项框始终关闭。例如，如果输入框就在页面底部，那么选项框应该放在哪里？
Another solution would be to replace the drop down with an autocomplete list (jquery ui autocomplete for example), with fewer options. It would probably improve user experience too :).
另一种解决方案是用自动完成列表（例如 jquery ui 自动完成）替换下拉列表，选项较少。它也可能会改善用户体验:)。
