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

最新推荐文章于 2024-07-12 23:03:07 发布
最新推荐文章于 2024-07-12 23:03:07 发布
阅读量1.3w 收藏 2
点赞数
分类专栏： css 文章标签： 树形结构下拉框 父子结构下拉框 optgroup datalist
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csm0912/article/details/52727308
版权
本文介绍了如何使用HTML5的select、option和optgroup标签创建具有父子结构的下拉框，强调optgroup用于定义选项组并展示其局限性。同时提到了datalist标签在定义选项列表中的应用，它可以实现类似ajax的搜索过滤效果，但无法实现父子结构。
摘要由CSDN通过智能技术生成

项目中可能经常要做具有父子结构的下拉框，像这样：
这里写图片描述
实战时，思维一直是用js插件来实现，今天重新学习HTML5时，发现可以直接用select和option实现，具体代码如下：

<select>
    <optgroup label="人力资源部">
        <option>小花</option>
        <option>小梅</option>
    </optgroup>
    <
最低0.47元/天 解锁文章
这个昵称没有被占用吧
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui select下拉菜单联动(子下拉框根据父下拉框不同显示不同内容)
weixin_45345555的博客
08-28 1475
有不同的代理商,也就是店铺.不同店铺里会有不同的分类,点击代理商选择一个店铺,才能点击商品分类选择分类. 直接点商品分类是没有内容的 选择代理商之后再再点击商品分类即可看到该商铺下的分类 代码实现 <div class="layui-inline"> <label class="layui-form-label">代理商</label> <div class="layui-input-inline"> <sele
树形下拉框样式
06-21
树形下拉框样式
Excel创建树形目录/分级显示数据
最新发布
2401_85876101的博客
07-12 1858
创建树形目录，可展开/折叠数据，分级显示
下拉框树形
weixin_34111790的博客
02-24 175
Ext.require(['Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox']); Ext.define("Ext.ux.comboboxtree", { extend : "Ext.form.field.Picker", requires : ["Ext.tree.Panel"], initComponent : func...
树形下拉框
hero1234victor的专栏
12-16 406
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /><title>xingzengyonghu</title><br /><script ty
树形下拉选择框
正一品程序员的博客
11-04 1345
<template> <div class="box"> <el-select size="small" placeholder="请选择" clearable v-model="selectLabel" @clear="selectClear"> <el-option class="option-style" :label="selectLabel" :value="selectValue">
★★最好用的树形下拉框组件（单选、多选均可）★★
iteye_14086的博客
03-19 686
  我在很久以前曾发布过一个美化的单选下拉框组件，一度很火爆。相信现在读我帖子的人里面仍然有在用这个组件的。 以前那个帖子地址：http://www.iteye.com/topic/851317     为庆祝QUI框架V2.1.5版本正式发布，这次给大家介绍一款非常好用的树形下拉框组件：QUI树形下拉框。   特点1：美化的并且可自定义的外观 该下拉框使用JS进行渲染。下拉框样式...
Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉
小谭鸡米花的博客
03-08 7073
今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。
bootstrap树形下拉框 下拉框树形菜单
11-15
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
bootstrap树形下拉框 下拉框树形菜单
07-26
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
手把手教学~基于element封装tree树状下拉框
公众号【猴哥说前端】
08-10 731
在日常项目开发中，树状下拉框的需求还是比较常见的，但是element并没有这种组件以供使用。在这里，小编就基于element如何封装一个树状下拉框做个详细的介绍。 通过这篇文章，你可以了解学习到一个树状下拉框组件是如何一步一步封装成功的。 话不多说，先看效果图： 封装组件 该组件主要基于element的select组件、tree组件及input组件进行二次封装的。 组件布局 首先我们需要基于这几个组件对我们的组件进行布局，话不多说直接上代码： <template> <el-selec
bootstrap树形下拉框 下拉框树形菜单（修改版）
06-06
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
树形下拉列表框
04-30
树形下拉列表框 提供选择和展开
Reporting Service 父子下拉树型菜单,父子下钻
03-09
Reporting Service 下拉菜单，与父子维表报表设计. 分为脚本及项目文件
基于JavaScript实现树形下拉框
11-23
平时会经常遇到树形结构的问题，比如显示目录结构等。 大多数情况下后台会返回这样的数据，如下： [ { id: 19, pid: 0, name: 'nodejs' }, { id: 20, pid: 19, name: 'express' }, { id: 21, pid: 19, name: 'mongodb' }, { id: 60, pid: 20, name: 'ejs' }, { id: 59, pid: 0, name: '前端开发' }, { id: 70, pid: 59, name: 'javascript' }, { id: 71, pid: 59, name: 'cs
jQuery带多选和过滤功能的树状结构下拉框插件
12-10
combo-tree是一款jQuery带多选和过滤功能的树状结构下拉框插件。通过该插件，可以在下拉框中生成指定数据结构的目录树，提供单选和多选，以及过滤功能。
html父子级下拉框,CSS-浮动与父级边框塌陷问题
weixin_30558777的博客
06-03 233
【摘要】CSS-浮动与父级边框塌陷问题考必过小编为大家整理了关于CSS-浮动与父级边框塌陷问题的信息，希望可以帮助到大家！CSS-浮动与父级边框塌陷问题标签：order边框html使用解决方案设置问题固定p浮动块级元素：独占一行h1~h6 p p 列表...行内元素：不独占一行span a img strong...行内元素可以被包含中块级元素中。父级边框塌陷问题解决方案：1.增加父级元素的...
select下拉框选择呈父子状态展示
LuuvyJune的博客
08-14 1373
展示效果： 表结构： 代码： 运用双重循环加判断实现 注：fnc:getCategoryList(1, '', 20, '')是自定义标签实现的方法 <select name="category" id="selectState" style="width: 130px;"> <c:forEach items="${fnc:getCategoryL...
将树状结构转换为下拉框，供用户进行选择
rainbow702的博客
06-22 205
需求： ① 给定一个数组 ② 数组中的每个元素均为树结构上的一个节点 ③ 除root节点外，其他每个结点，均有一个字段，用于记录直接父节点的id ④ root节点以下的每个层次中，节点的数量不限 树结构如下图：     ⑤ 要求实现： 将上述树状图中的每个节点作成下拉框中的一个option供用户进行选择，效果图如下：      实现代码： /** * build all...
uniapp 树结构下拉框
09-01
在uniapp中实现树结构下拉框，可以考虑以下步骤： 1. 首先，你需要准备一个树形结构的数据源，可以是一个数组或者对象。每个节点包含一个唯一的标识符和父节点的标识符。你可以根据实际需求进行数据的构建。 2. 在页面中创建一个下拉框组件，可以使用uniapp提供的select组件或者自定义组件。 3. 在下拉框组件中绑定一个变量，用于存储当前选中的节点信息。 4. 使用computed属性或者watch属性监听选中节点的变化，根据选中的节点获取其所有子节点数据。 5. 将子节点数据渲染到下拉框中，可以使用v-for指令进行循环渲染。 6. 实现下拉框的展开和收起功能，可以使用点击事件或者动态样式控制下拉框的显示与隐藏。 7. 当选中某个子节点时，更新选中节点的值，并且触发change事件。 以上是一个基本的实现思路，具体的代码实现可以根据你的需求进行调整和扩展。希望对你有所帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值