使用滚动条创建下拉列表 [英] create dropdown list with scrollbar
问题描述
我有一个带有选项列表的HTML下拉列表.当用户单击下拉列表时，应该看到带有滚动条的前五个选项.我想使用JavaScript和CSS实现此目的.由于我是新手，请建议我如何使用滚动条显示下拉列表，以便能够滚动并从下拉列表中选择一个选项.下面是我的HTML代码:
I have a HTML drop down list with list of options. When user clicks on the dropdown list, first five options with scrollbar should be seen. I want to achieve this using JavaScript and CSS. As I'm new to these, please suggest how I can show the dropdown list with scrollbar so that can able to scroll and select an option from the dropdown list. Below is my HTML code:
<html>
<body>
<select>
<option value="one">Option1</option>
<option value="two">Option2</option>
<option value="three">Option3</option>
<option value="four">Option4</option>
<option value="five">Option5</option>
<option value="siz">Option6</option>
<option value="seven">Option7</option>
<option value="eight">Option8</option>
</select>
</body>
</html>
使用上面的html代码，当用户单击下拉列表时，所有选项都没有滚动条.我想显示带有滚动条的前五个选项.
With the above html code, when the user click on the dropdown list, all options are seen without scrollbar.I want to show first five options with scrollbar.
推荐答案
尝试此 https://jsfiddle.net/Ltkpshm9/我已将示例添加到 jsfiddel 或简单地使用
try this https://jsfiddle.net/Ltkpshm9/ example i have added to the jsfiddel
or simply use,
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="one">Option1</option>
<option value="two">Option2</option>
<option value="three">Option3</option>
<option value="four">Option4</option>
<option value="five">Option5</option>
<option value="siz">Option6</option>
<option value="seven">Option7</option>
<option value="eight">Option8</option>
</select>
这篇关于使用滚动条创建下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
