树形下拉框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>xingzengyonghu</title>
<script type="text/javascript">
var data = new Array();

 

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) {
 //root结点
 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 line = "";

var blank = "";

if (next.pid == current.id) {
intLevel = 0;
var intlvl = this.getLevel(this._data, this._rootId, current);
for (a = 0; a < intlvl; a++)
line += "--";
blank = line + "--";
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;
}

function getSelectValue(){
var obj=document.getElementById("myselect");   
alert(obj.value);
}

</script>
</head>
<body>
<select id="myselect">
</select>
<script language=javascript type="text/javascript">
data[0] = {id: '0',pid: '-1',text: 'china'};
data[1] = {id: '1',pid: '0',text: 'hebie'};
data[2] = {id: '2',pid: '6',text: 'moshike'};
data[3] = {id: '3',pid: '0',text: 'handan'};
data[4] = {id: '4',pid: '0',text: 'shijiazhuang'};
data[5] = {id: '5',pid: '3',text: 'handanxian'};
data[6] = {id: '6',pid: '-1',text: 'eluoshi'};

data[7] = {id: '7',pid: '5',text: 'chengliang sclsch@188.com'};
data[8] = {id: '121',pid: '1',text: '111'};
data[9] = {id: '1232',pid: '4',text: '111'};
var ts = new TreeSelector(document.getElementById("myselect"), data, -1);
ts.createTree();
</script>
<input type="button" value="huoquxuanzhongdezhi" οnclick="getSelectValue()"/>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值