html下拉框树节点,下拉框树,HTML代码

很多时候，我们需要将下拉框里面的数据用树显示出来，这样会便于客户得到清晰的数据，而且比较直接，晾出以下HTML代码，可以直接复制到HTML代码里面运行！

/*****************************************

auth: polarbear

data: 2009.04.17

******************************************/

//ucstar select

//id: select id

//name: select attribute name

//rootSelectname: select first option value

//sign: iterator options's prefix sign

//selectid: about the selected option id

function UcstarSelectObj(id,name,rootSelectname,sign,selectedid) {

this.id = id;

this.name = name;

this.rootSelectname = rootSelectname;

this.sign = sign;

this.selectedid = selectedid;

this.selectStr = "";

this.ucstaroptions = [];

this.ucstaroptionobjs = [];

}

//ucstar option

//id: option id

//name: option value

//pid: the node's parent id

//desc: the option's description

function UcstarOption(id,name,pid,desc) {

this.id = id;

this.name = name;

this.pid = pid;

this.desc = desc;

}

//get the options by parentid

UcstarSelectObj.prototype.getChildOptions = function(vPid) {

var childOptions = new Array();

//this.debug(this.ucstaroptions.length);

for(var i = 0; i < this.ucstaroptions.length; i++) {

if(this.ucstaroptions[i].pid == vPid) {

//this.debug(this.ucstaroptions[i].pid + "-" + this.ucstaroptions[i].id);

childOptions[childOptions.length] = this.ucstaroptions[i];

}

}

return childOptions;

}

//debug message

UcstarSelectObj.prototype.debug = function(message) {

alert(">>Debug:"+message);

}

//add the select's option

UcstarSelectObj.prototype.addOption = function(id,name,pid,desc) {

//this.debug(this.ucstaroptions.length);

this.ucstaroptions[this.ucstaroptions.length] = new UcstarOption(id,name,pid,desc);

this.ucstaroptionobjs[id] = new UcstarOption(id,name,pid,desc);

}

//generate select string

UcstarSelectObj.prototype.genSelect = function(vPid) {

var sPid = "0";

if(vPid != undefined) {

sPid = vPid;

}

this.selectStr = '';

this.selectStr += '' + this.rootSelectname + '';

this._genSelect(sPid,'');

this.selectStr += '';

return this.selectStr;

}

//private generate select string

UcstarSelectObj.prototype._genSelect = function(vPid,vSign) {

var oldtsign = vSign;

var newtsign = oldtsign + this.sign;

var childOptions = this.getChildOptions(vPid);

if(childOptions != null && childOptions.length > 0) {

for(var i = 0; i < childOptions.length; i++) {

this.selectStr += '

if(childOptions[i].id == this.selectedid) {

this.selectStr += ' selected';

}

this.selectStr += '>' + oldtsign + childOptions[i].name + '

';

this._genSelect(childOptions[i].id,newtsign);

}

}

}

UcstarSelectObj.prototype.setSelected = function(optionid) {

this.selectedid = optionid;

}

var testSelect = new UcstarSelectObj("myid","myname","请选择","  ");

testSelect.addOption("0","root","-1","");

testSelect.addOption("1","abc","0","");

testSelect.addOption("2","abc2","0","");

testSelect.addOption("3","abc3","0","");

testSelect.addOption("4","abc1-1","1","");

testSelect.addOption("5","abc1-2","1","");

testSelect.addOption("6","abc2-1","2","");

testSelect.addOption("7","abc1-1-1","4","");

testSelect.addOption("8","abc1-1-2","4","");

testSelect.addOption("8","abc1-2-1","5","");

//testSelect.setSelected('6');

function test() {

var result = testSelect.genSelect();

alert(result);

document.getElementById('test').innerHTML = result;

}