父子结构(树形结构)下拉框
来源:互联网 发布:java程序中使用@的注释 编辑:程序博客网 时间:2024/04/30 13:55
项目中可能经常要做具有父子结构的下拉框,像这样:
实战时,思维一直是用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标签实现父子结构的下拉框
0 0
- 父子结构(树形结构)下拉框
- 下拉框绑定树形结构
- 绑定树形结构的下拉框
- Redmine 父子问题树形结构显示技巧
- yx-树形结构展示,父子关系显示为完整树形
- 树形结构,根据父子ID生成树形节点
- JqueryEasyUI中combotree 加载下拉框中的树形结构
- JqueryEasyUI中combotree 加载下拉框中的树形结构
- 下拉框动态获取数据库值:树形结构写法
- 使用树形结构与CTE实现父子列多层次查询
- 在同一个下拉列表显示树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- LeetCode 144: Binary Tree Preorder Traversal
- Web WAF2 设置可编辑按钮只在选择复选框时选中当前行
- Activity生命周期
- 2016年弱校联萌 H
- H5测试
- 父子结构(树形结构)下拉框
- ARM处理器系列博客List
- 【SSM 4】Mybatis逆向生成工具
- 如何将java文件夹转换为jar文件
- 初识神经网络(2)
- JS 输入框只能输入数字
- 第六周 项目5-排队看病模拟
- java数据结构和算法(线性表)
- __func__预定义标识符