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

最新推荐文章于 2023-03-08 13:41:07 发布

这个昵称没有被占用吧

最新推荐文章于 2023-03-08 13:41:07 发布

阅读量1.4w

点赞数

分类专栏： css 文章标签：树形结构下拉框父子结构下拉框 optgroup datalist

本文链接：https://blog.youkuaiyun.com/csm0912/article/details/52727308

版权

css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用HTML5的select、option和optgroup标签创建具有父子结构的下拉框，强调optgroup用于定义选项组并展示其局限性。同时提到了datalist标签在定义选项列表中的应用，它可以实现类似ajax的搜索过滤效果，但无法实现父子结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中可能经常要做具有父子结构的下拉框，像这样：
这里写图片描述
实战时，思维一直是用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>

效果如下：
这里写图片描述
有几点需要注意的是：

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

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