html 下拉框树,下拉框显示树形菜单
六七句-网页特效-导航菜单-下拉框中显示的多级树形菜单
var data = new Array();
data[0] = {id: '0',pid: '1',text: '河北'};
data[1] = {id: '1',pid: '-1',text: '中国'};
data[2] = {id: '2',pid: '6',text: '莫斯科'};
data[3] = {id: '3',pid: '0',text: '邯郸'};
data[4] = {id: '4',pid: '0',text: '石家庄'};
data[5] = {id: '5',pid: '3',text: '邯郸县'};
data[6] = {id: '6',pid: '-1',text: '俄罗斯'};
data[7] = {id: '7',pid: '1',text: '湖南'};
data[8] = {id: '8',pid: '7',text: '益阳'};
data[9] = {id: '9',pid: '8',text: '南县'};
data[10] = {id: '10',pid: '9',text: '茅草街'};
data[11] = {id: '11',pid: '10',text: '新尚'};
function TreeSelector(item, data, rootId) {
this._data = data;
this._item = item;
this._rootId = rootId;
}
TreeSelector.prototype.createTree = function() {
var len = this._data.length;
for (var i = 0; i < len; i++) {
if (this._data[i].pid == this._rootId) {
this._item.options.add(new Option(".." + this._data[i].text, this._data[i].id));
for (var j = 0; j < len; j++) {
this.createSubOption(len, this._data[i], this._data[j]);
}
}
}
}
TreeSelector.prototype.createSubOption = function(len, current, next) {
var blank = "..";
if (next.pid == current.id) {
intLevel = 0;
var intlvl = this.getLevel(this._data, this._rootId, current);
for (a = 0; a < intlvl; a++) blank += "..";
blank += "├-";
this._item.options.add(new Option(blank + next.text, next.id));
for (var j = 0; j < len; j++) {
this.createSubOption(len, next, this._data[j]);
}
}
}
TreeSelector.prototype.getLevel = function(datasources, topId, currentitem) {
var pid = currentitem.pid;
if (pid != topId) {
for (var i = 0; i < datasources.length; i++) {
if (datasources[i].id == pid) {
intLevel++;
this.getLevel(datasources, topId, datasources[i]);
}
}
}
return intLevel;
}
var ts = new TreeSelector(document.getElementById("myselect"), data, -1);
ts.createTree();
http://blog.163.com/wm_at163/blog/static/132173490201062574052677/
html 下拉框树,下拉框显示树形菜单相关推荐
- easyUI前端框架的tree(树)前台展示(树形菜单二)——java
转载请标明出处:https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 easyUI前端框架的t ...
- xm-select下拉框,下拉树
使用案例 先上图 layui中使用xm-select下拉选择树 1.引入js <script src="../static/res/bootstrap/js/jquery-3.4.1. ...
- 下拉样式_Axure 组件重写之神奇的文本框和下拉框
现有的系统组件不够好用,加之我们能利用axure基本功能来实现更好用的组件,因此,就有了重写系列教程. 1. 什么是重写? 为了更好发挥产品原型在系统设计阶段指引.展示等需求,通过种种方式对原生组件进 ...
- element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
- html 复选框 mysql_Html:实现带复选框的下拉框(一)
概述 项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码 模拟实现带复选框的下拉列表 body{ margin: 20 ...
- jQuery对下拉框、单选框、多选框的处理
下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...
- Flutter:使用复选框进行下拉多选
Flutter:使用复选框进行下拉多选 本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法.在第一种方法中,我们将从头开始构建多选.在第二种方法中,我们将使用第三方包快速完成工作 ...
- 如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们?雪原虎 发布于:2007-10-22 00:32
如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎 发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...
- uniapp弹出框_uniApp上拉刷新,下拉加载,以及筛选功能
uniApp插件市场有很多友好的插件,今天举一个例子 如上图所示,实现上拉刷新,下来加载,右上角点击弹出筛选框,只需要在插件市场搜索刷新 选择你想要的效果(也可以下载后自己改动效果) 点击导入插件,会 ...
- [css] css怎么更改表单的单选框或下拉框的默认样式?
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
最新文章
- MP实战系列(二)之集成swagger
- swift 中showAlertTitle的使用
- CoordinatorLayout中AppBarLayout的折叠仅依靠滑动RecyclerView实现
- win10无线投屏_日臻薄技 | 手机如何投屏到电脑
- Boost:aligned alloc对齐分配的测试程序
- socket 编程 基于 select 实现的回射客户端/服务程序
- Linux命令【四】文件+虚拟内存+常用系统函数
- 一辈子的礼物56ay长沙论坛
- 第三章网络安全基础考试要点及真题分布
- linux入门 适合初学者_【推荐】适合初学者临摹的国画|国画基础入门教学视频教程!...
- SAP License:晨紫集团ERP系统应用考核体系简介
- PE知识复习之PE的各种头属性解析
- JSTARS投稿学习笔记
- python代码翻译器-Python一键转Java?quot;谷歌翻译”你别闹(附链接)
- 理解Spring MVC Model Attribute 和 Session Attribute
- 2021年PMP考试模拟题7(含答案解析)
- MATLAB函数之image、imagesc、imshow的用法
- 回顾史上25款经典芯片:曾震撼了世界
- 射频中的回波损耗,反射系数,电压驻波比以及S参数的含义
- 华纳云:美国高防服务器的防火墙介绍
热门文章
- 阿朱访谈:程序员转型期职业选择,是继续做技术高手还...
- php写前端还是nodejs,javascript - 新手想在短期内写一个个人博客,是用php还是用nodejs?...
- tps 、qps、bps、Bps的含义
- 蓝桥杯——六面体染色
- [Cnbeta]企业与家用无线路由器的区别
- mysql emoji 问号_mysql数据库怎么存入emoji表情,更改utf8mb4后为什么出现全是问号...
- Telemetry 技术概述
- web前端面试题以及相关答案解析
- 拓嘉启远:拼多多38“福女节”优惠如何参与
- 转行做程序员,月薪过万需要多久?