select表单元素详解及下拉列表模拟实现

原文地址：→看过来

写在前面

select 是HTML表单元素中很常用的一个，其中很重要的几个属性常被忽略，但这几个属性却能帮助我们完成很多的功能，当然，select下拉列表默认样式很不友好，所以更多的时候可以自己模拟实现一个同样功能的下拉菜单。下文先介绍select标签的一些属性及使用，后面再模拟一个相同效果的下拉菜单。

介绍之前先看下demo预览图：

1. firefox下select的默认样式：
   

2. chrome下select的默认样式：
   

3. firefox下自定义select下拉列表的icon效果：
   

4. chrome下自定义select下拉列表的icon效果：
   

5. 原生js模拟select下拉列表的实现效果(chrome及firefox效果一致)：
   

源代码地址→传送门

预览地址→传送门

1. select表单元素及相关属性（我只是大自然的搬运工）

• 提示
  select 元素是一种表单控件，可用于在表单中接受用户输入

• 支持的全局属性

  • 仅挑几个属性
  • autofocus(其值为autofocus): 规定在页面加载后文本区域自动获得焦点。
  • disabled(值为disabled): 规定禁用该下拉列表。
  • form(值为form_id): 规定文本区域所属的一个或多个表单。
  • multiple(值为multiple): 规定可选择多个选项。

• 支持的事件属性

  • 挑一个最常用到的额
  • onchange：当select改变选择时调用的事件句柄。(可以实现三级联动的效果)

• selected对象的属性及方法

  • 挑几个重要的额