父子结构（树形结构）下拉框

项目中可能经常要做具有父子结构的下拉框，像这样：

实战时，思维一直是用js插件来实现，今天重新学习HTML5时，发现可以直接用select和option实现，具体代码如下：

<select>
    <optgroup label="人力资源部">
        <option>小花</option>
        <option>小梅</option>
    </optgroup>
    <optgroup label="研发部">
        <option>小明</option>
        <option>发仔</option>
    </optgroup>
</select>
           

其中最关键的就是optgroup标签了，它的作用是定义选项组。optgoup的属性label用来为选项组定义描述。使用这种方法也存在局限性：首先，不能选择整个选项组，如我们不能选择研发部这个父选项；其次，不能实现收缩，当选项数目众多时，下拉框就会过长。

补充：datalist，用来定义选项列表

使用如下：

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>
           

效果如下：

有几点需要注意的是：

1. 可以实现类似ajax的效果，比如我们在输入框中输入c时，会出现下拉选项chrome
2. 下拉框显示的值是通过option的value属性设置的，当option的内容设置与value值一样时，则不显示内容，当不一样时，内容部分会显示在value值后面，也颜色更淡，像这样：

   

   当选择值时，填入输入框的是value的值，即当我们选择Firefox bbb时，填入输入框的是Firefox
3. 不能通过optgroup标签实现父子结构的下拉框