在下拉列表 HTML 中有一个滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23892204/
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
Have a scroll bar in drop down list HTML
提问by Ambrose
I am looking for a way to have a scroll bar in a drop-down list in HTML, such that if the drop-down list contains more than eg. 5 items, a scroll bar will appear for viewing the rest. This is because I will be forced to have some big lists. I have been googleing it for the past hours, but with no luck.
我正在寻找一种在 HTML 中的下拉列表中包含滚动条的方法，这样如果下拉列表包含的不仅仅是例如。5 项，将出现滚动条以查看其余项。这是因为我将被迫有一些大名单。过去几个小时我一直在用谷歌搜索它，但没有运气。
It needs to work for IE8+, FF and Chrome.
它需要适用于 IE8+、FF 和 Chrome。
My list currently looks like this:
我的列表目前看起来像这样：
<select name="Select1" size="1">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
I have tried using the following CSS within a Div, but that made no difference.
我曾尝试在 Div 中使用以下 CSS，但这没有任何区别。
.myDropDown{
height: 60px;
max-height: 60px;
overflow-y: scroll;
}
Changing the "size" gives a big scroll-able table, which is not what I am after.
更改“大小”会提供一个可滚动的大表，这不是我所追求的。
http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-70-78-metablogapi/1882.clip_5F00_image001_5F00_thumb.pngis an appropriate image of what I'm after.
I have the possibility to use js, php and jQuery if needed, but the simpler the solution, the better.
如果需要，我可以使用 js、php 和 jQuery，但解决方案越简单越好。
//Ambrose
//安布罗斯
回答by Sion Christian
You need to give an 'id' to your tag.
你需要给你的标签一个“id”。
it should be like this
应该是这样的
HTML 5
HTML 5
<select name="Select1" size="1" id="ddlCars">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
CSS
CSS
#ddlCars {
min-height:190px;
overflow-y :auto;
overflow-x:hidden;
position:absolute;
width:300px;
display: contents;
}
回答by Diodeus - James MacFarlane
You cannot change the built-in behaviour of the SELECT element. You may want to consider a JS-based alternative, such at Twitter Bootstrap.
您不能更改 SELECT 元素的内置行为。您可能需要考虑基于 JS 的替代方案，例如Twitter Bootstrap。
回答by Paulie_D
Perhaps I'm missing something but isn't that what the sizeattribute is for?
也许我错过了一些东西，但这不是size属性的用途吗？
<select name="Select1" size="6">
<option value="">- Please select a name -</option>
<option value"volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="ford">Ford</option>
<option value="toyota">Toyota</option>
<option value="aston">Aston Martin</option>
<option value="alfa">Alfa Romeo</option>
</select>
