<SELECT>是一个HTML元素， 用于使用下拉列表选择项目 。 当您需要选择很长的项目列表（例如日期）时，此功能很有用。 不幸的是，对于那些想要创建精美网页的人来说，其网络浏览器中的默认<SELECT>不是非常用户友好，并且在样式上看起来也不是很好。
要设置元素的样式，CSS应该足够了。 但是，就可访问性而言，这还不够。 引入EasyDropDown.js （一个免费的jQuery插件）来掩盖所有这些缺陷。
EasyDropDown.js可以使用许多功能轻松为网页中的老式select元素设置样式。 将<SELECT>元素与此插件一起应用后，它将通过文本搜索获得完整的键盘控制。 此工具还为长列表中的项目提供内部滚动，以限制下拉框的大小。 还提供表格和验证，这有助于兼容性。
安装
要安装EasyDropDown，首先将jQuery库包含到您的网页中。 确保还包括javascript（ 在此处获取），如下所示：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.easydropdown.js" type="text/javascript"></script> 及其head标签内CSS文件：
<head>
..
<link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>
..
</head>如果您使用其他主题，请确保将文件复制到Web文件夹中。 不用担心，因为您不需要在HTML中包括它们来调用它们。
选择样式
使用EasyDropDown.js时，您可以使用干净的语义标记构建可自定义的下拉菜单。 select元素只能在HTML中设置样式。 您可以禁用元素，定义所选选项或轻松添加标签 。
要设置样式，必须首先在标签中包含一个dropdown类。 可以通过在选项内提供label类来添加label 。 这是基本标记：
<select class="dropdown">
<option value="" class="label">Setting</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select> 就是这样，您不需要添加任何自定义JavaScript。 现在，糟糕的老式<SELECT>变成了漂亮的精美下拉输入。
如果要添加预选选项，只需在下拉菜单中selected属性即可。 我们建议不要将标签与此设置一起使用，因为所选值将覆盖标签 。
<select class="dropdown">
...
<option value="2" selected>Option 2</option>
...
</select>
您还可以使用disabled属性禁用下拉菜单，如下所示：
<select class="dropdown" disabled>
...
</select>准备使用主题
EasyDropDown.js带有另外两个易于使用的主题： Metro和Flat 。 要使用主题，可以利用HTML5 data-attribute 。
在<SELECT>标记内，调用data-settings='{"wrapperClass":"theme-name"}'以应用另一个主题。 随意更换theme-name与现有的主题名称： metro或flat 。 这是示例：
<select class="dropdown" data-settings='{"wrapperClass":"metro"}'>
...
</select>
除了wrapperClass ，您可以添加更多设置，有关详细信息，请参见文档页面 。 如果您对JavaScript代码很满意，可以在此处查看教程。
翻译自: https://www.hongkiat.com/blog/style-select-with-easydropdown-js/
3719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
