html下拉框树节点,下拉框展示树形菜单

当前位置:我的异常网» Web前端 » 下拉框展示树形菜单

下拉框展示树形菜单

www.myexceptions.net  网友分享于：2013-08-14  浏览：200次

下拉框显示树形菜单

六七句-网页特效-导航菜单-下拉框中显示的多级树形菜单

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/

文章评论