<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> javascript树型菜单 author:sclsch@188.com</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
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:'5',text:'孙程亮 sclsch@188.com'};
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;
}
</script>
</head>
<body>
<select id="myselect">
</select>
<script language=javascript type="text/javascript">
var ts = new TreeSelector(document.getElementById("myselect"),data,-1);
ts.createTree();
</script>
</body>
</html>
分享到:
相关推荐
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
bootstrap树控件使用树形控件在下拉框select中显示,实现树形下拉框
layui组件之树形下拉框例子,看完你就会写下拉树了。不过同时还需要下载ztree的相关js和style 不过压缩包里都有呢!希望对大家有所帮助
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
平时会经常遇到树形结构的问题,比如显示目录结构等。 大多数情况下后台会返回这样的数据,如下: [ { id: 19, pid: 0, name: 'nodejs' }, { id: 20, pid: 19, name: 'express' }, { id: 21, pid: 19, name: '...
完善的树形下拉框功能,根据自定义层级规则展开,可以直接嵌入项目,还附带两个漂亮的登录界面; 更多介绍:https://blog.csdn.net/weixin_43151418/article/details/124689160
javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可).zip
结合ztree制作的下拉框,数据多级显示,通过配置实现多选或单选,数据可以是固定数据或ajax动态加载
JS 实现从XML中取数据实现下拉树显示数据 也可动态数据库取资料产生树结构
这是一个bootstrap风格的ztree下拉框组件 包含js和css文件 下拉框显示成单纯的树结构还是包含checkbox的多选树形结构是可选的
网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可)
用jsTree+div模拟 js树形下拉菜单
一个基于Vue2、element ui、vue-cli、vuex、vue-router、axios 、echarts后台管理系统demo. 无限级菜单,下拉树形选择框