Question

我正在寻找一种方法，在HTML的下拉列表中有一个滚动条，这样如果下拉列表包含的内容超过例如。 5个项目，将出现一个滚动条以查看其余部分。这是因为我将被迫拥有一些大名单。过去几个小时我一直在谷歌，但没有运气。

它需要适用于IE8 +，FF和Chrome。

我的列表目前看起来像这样：

<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>

我尝试在Div中使用以下CSS，但这没有任何区别。

.myDropDown{
height: 60px;
max-height: 60px;
overflow-y: scroll;
}

更改“大小”会产生一个可滚动的大表，这不是我所追求的。

http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-70-78-metablogapi/1882.clip_5F00_image001_5F00_thumb.png是我所追求的适当形象。

如果需要，我有可能使用js，php和jQuery，但解决方案越简单越好。

//安布罗斯

Answer 1

您需要为标记添加“ID”。

应该是这样的

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

#ddlCars {
    min-height:190px; 
    overflow-y :auto; 
    overflow-x:hidden; 
    position:absolute;
    width:300px;
    display: contents;
 }

Answer 2

您无法更改SELECT元素的内置行为。您可能需要考虑基于JS的替代方案，例如Twitter Bootstrap。

Answer 3

也许我错过了一些东西，但不是size属性的用途？

JSfiddle

<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>

在下拉列表HTML中有一个滚动条

3 个答案: