您的位置：首页 > Web前端 > JavaScript

JS分级下拉列表框

2009-09-27 11:16 211 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<!--
<SELECT id="selClass">
<option>╋BBCC</option>
<option>  ┠BBCC</option>
<option>    ┗BBCC</option>
<option>  ┠BBCC</option>
<option>  ┠BBCC</option>
<option>  ┗BBCC</option>
<option>╋BBCC</option>
<option>╋BBCC</option>
<option>╋BBCC</option>
<option>╋BBCC</option>
<option>  ┠BBCC</option>
<option>  ┠BBCC</option>
<option>  ┠BBCC</option>
<option>    ┗BBCC</option>
<option>  ┗BBCC</option>
<option>    ┗BBCC</option>
<option>      ┗BBCC</option>
</SELECT>
-->
<!--
分级下拉列表框，无需使用xml包
-->

<xml classid="1" parentid="" version='cn'>机械</xml>
<xml classid="2" parentid="" version='cn'>电子</xml>
<xml classid="3" parentid="" version='cn'>五金</xml>
<xml classid="4" parentid="2" version='cn'>电子====</xml>
<xml classid="5" parentid="3" version='cn'>五金====</xml>
<xml classid="6" parentid="5" version='cn'>五金====</xml>
<xml classid="7" parentid="5" version='cn'>五金====</xml>
<xml classid="8" parentid="5" version='cn'>五金====</xml>
<xml classid="9" parentid="4" version='cn'>五金====</xml>
<xml classid="10" parentid="3" version='cn'>五金====</xml>
<SCRIPT LANGUAGE="JavaScript">
//##################################################################################
function Stack(){
this.__DataItem=new Array;
this.length=0;
this.__StackPointer=-1;
}
Stack.prototype.Push=function (data){
this.length++;
this.__StackPointer++;
this.__DataItem[this.__StackPointer]=data;
}
Stack.prototype.Pop=function (){
if(this.length<=0) return null;
if(this.__StackPointer<=-1) return null;
this.length--;
this.__StackPointer--;
return this.__DataItem[this.__StackPointer+1];
}
Stack.prototype.toString=function (){
try{var chr=arguments[0]}catch(e){var chr=''}finally{
if(typeof(chr)!='string') chr='';}
if(this.length<=0) return "";
var retStr="";
for(var iCnt=0;iCnt<this.length;iCnt++)
retStr+=this.__DataItem[iCnt]+chr;
return retStr;
}
Stack.prototype.Item=function (ind){
if(ind<0) return null;
if(ind>this.__StackPointer) return null;
return this.__DataItem[ind];
}
Stack.prototype.Top=function(){
if(this.__StackPointer<0) return null;
return this.__DataItem[this.__StackPointer];
}

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//var oData = document.getElementsByTagName('xml');

function DrawSelector(selName,fnOnChange)
{
var gStack=new Stack();
function BuildTree(object,iGrade,bolCont)
{
var fla = hasChildItem(object);

document.write ('<option value="'+object.classid+'">');
document.write (gStack.toString());
document.write (object.innerHTML+'　</option>');

var oNodeTemp = getChildren(object);
if(fla){
if(iGrade>0) {gStack.Pop(); if(bolCont) gStack.Push('│'); else gStack.Push('　');}
gStack.Push(' ');
for(var iCnt=0;iCnt<oNodeTemp.length;iCnt++){
if(iCnt==oNodeTemp.length-1){
gStack.Push('└');
BuildTree(oNodeTemp[iCnt],iGrade+1,false);
gStack.Pop();
}else{
gStack.Push('├');
BuildTree(oNodeTemp[iCnt],iGrade+1,true);
gStack.Pop();
}
}
gStack.Pop();
}
}
/////////////////////////////////////////////////////////////////////////////
if(fnOnChange)
document.write ('<select name="'+selName+'" onchange="'+fnOnChange+'">');
else
document.write ('<select name="'+selName+'">');
document.write('<option value="">===所有===</option>');

var oData = getTopLevelItems(); //所有父级为空的节点
for(var iCnt=0;iCnt<oData.length;iCnt++){
if(iCnt==oData.length-1){
BuildTree(oData[iCnt],0,false);
}else{
BuildTree(oData[iCnt],0,true);
}
}
document.write ('</select>');
}

function hasChildItem(object)
{
if(object == null)
return false;

var hasChild = false;
var oData = getAllItems();
if(oData != null)
{
for(var i=0;i<oData.length;i++)
{
if(oData[i].parentid == object.classid)
hasChild = true;
}
}
return hasChild;
}

function getChildren(object)
{
if(object != null)
{
var children = new Array();
var oData = getAllItems();
for(var i=0;i<oData.length;i++)
{
if(object.classid == oData[i].parentid)
children.push(oData[i]);
}
return children;
}
else
{
return null;
}
}

function getTopLevelItems()
{
var obj = new Array();
var oData = getAllItems();
for(var i=0;i<oData.length;i++)
{
if(oData[i].parentid == '')
obj.push(oData[i]);
}
return obj;
}

function getAllItems()
{
var oData = document.getElementsByTagName('xml');
return oData;
}
DrawSelector('selDepart','window.alert(this.value)');

//-->
</SCRIPT>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航