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对象的属性及方法

  • 挑几个重要的额
  • options[]：返回包含下拉列表中的所有选项的一个数组。
  • length：返回下拉列表中的选项数目。
  • selectIndex：设置或返回下拉列表中被选项目的索引号。
  • add(): 向下拉列表添加一个选项。
  • remove(): 从下拉列表中删除一个选项。

• option标签

  • option元素定义下拉列表中的一个选项（一个条目）。
  • disabled(值为disabled)：规定此选项应在首次加载时被禁用。
  • label(值为text)：定义当使用 时所使用的标注。
  • selected)(值为selected)：规定选项（在首次显示在列表中时）表现为选中状态。
  • value(text): 定义送往服务器的选项值。

• option对象的属性

  • 几个比较重要的额
  • defaultSelected：返回 selected 属性的默认值。
  • disabled:设置或返回选项是否应被禁用。
  • index：返回下拉列表中某个选项的索引位置。
  • selected：设置或返回 selected 属性的值。

注意：

1. select本身的样式可用css设置，但对option设置的样式在chrome中不起作用，在Firefox可行
2. w3c官网的详细解释 → 传送门

2. HTML标签自定义属性（纯属题外话）

HTML5 data-*自定义属性：添加data-前缀使属性变成自定义属性，最大的好处是我们可以把所有自定义属性在dataset对象中统一管理。

<div id="student" data-weight="98">点击显示</div>

var student = document.getElementById("student");
student.dataset.cm = '168'; //设置自定义属性
var stuWeight = studdent.dataset.weight; //获取自定义属性值

student.dataset.birthDate = '19980612';  //连字符的自定义属性 (例如设置data-birth-date)

3. 自定义下拉列表的图标

select默认样式中的下拉按钮不是很好看，我们可以自己用替张图片替换掉。（效果看文章上面的链接，请忽略我的丑丑的图标额）

1. 对select自定义图标时需要设置apperance属性为none(隐藏原有小三角)，并做兼容
2. 加上将要替换的自定义图标即可

select{
    -webkit-appearance: none; /*隐藏默认样式中的小三角*/
    -moz-appearance: none;
    background: url('http://opif0c56u.bkt.clouddn.com/select.gif') no-repeat scroll right 8px center; 
}

3. 可对option添加背景色
4. 在firefox中可使用伪元素:before对option添加序号（此处插播一个css添加序号的方法）

select{
    counter-reset: item; //类似于声明计数变量（声明在父元素中）
}
select option:before {
    counter-increment: item;   //要使用的计数名
    content: counter(item) " . "; //追加前置序号,chrome对option的设置中不起作用
}

4. js模拟select下拉菜单(重头戏)

许多时候会觉得select表单特别的不好用，不能自己添加很多的样式，小伙伴们还是自己模拟一个吧！

1. html代码结构：

<div id="sel-wrap">
    <div id="sel-show">=请选择=</div>
    <ul id="sel-option">
        <li class="item">早上吃包子</li>
        <li class="item">中午吃米饭</li>
        <li class="item">晚上吃面条</li>
        <li class="item">宵夜吃烧烤</li>
        <li class="item">睡前喝牛奶</li>
    </ul>
</div>

2. 下拉按钮的图标跟上面自定义的方式一致（这里不再说了）。

3. hover到li上时，利用伪元素:before追加一个对勾。

#sel-option li:hover:before {
    content: '\2714' ' ';  //此处为对勾+空格
    }

4. 下面说下实现原理：
   • 下拉菜单的选项为ul中的内容，需要先隐藏起来，且显示的时候是浮在其他内容的上面，此处需要使用position来实现。（即脱离文档流）

#sel-wrap{
    position: relative;  //设置父元素
}
#sel-option{
    position: absolute;  //设置下拉列项的包裹层
}

• 点击下拉框时显示下拉列表项

• 点击列表项时将选中值传递给下拉框并显示，同时下拉项收起（此处的点击事件绑定在父元素中）

• 当下拉项显示并未选中任何下拉项时，点击下拉框收起下拉项

• 当下拉项显示并未选中任何下拉项时，点击下拉项以外的任意位置，收起下拉框

• 最终实现（样式什么的都可以随便改）：

小结

1. 小花作为菜鸟第一次自己模拟下拉列表的实现，有可能存在代码欠缺，但是为了方便以后使用的时候查询，所以就记录下
2. 欢迎大佬们指点