zoukankan      html  css  js  c++  java
  • 用javascript实现分级下拉菜单(可实现无限级)

    发表时间:2006-6-25 16:57:00

    <!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>&nbsp;&nbsp;┠BBCC</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;┗BBCC</option>
    <option>&nbsp;&nbsp;┠BBCC</option>
    <option>&nbsp;&nbsp;┠BBCC</option>
    <option>&nbsp;&nbsp;┗BBCC</option>
    <option>╋BBCC</option>
    <option>╋BBCC</option>
    <option>╋BBCC</option>
    <option>╋BBCC</option>
    <option>&nbsp;&nbsp;┠BBCC</option>
    <option>&nbsp;&nbsp;┠BBCC</option>
    <option>&nbsp;&nbsp;┠BBCC</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;┗BBCC</option>
    <option>&nbsp;&nbsp;┗BBCC</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;┗BBCC</option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┗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('&nbsp;');
       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>
    <!--
    <br>
    <hr style="height:1px">
    ⊙●○①⊕◎Θ⊙¤ ㊣★☆♀◆◇◣◢◥▲▼△▽⊿◤ ◥ ▂ ▃ ▄ ▅ ▆ ▇ █ █ ■ ▓ 回 □ 〓≡ ╝╚╔ ╗╬ ═ ╓ ╩ ┠ ┨┯ ┷┏ ┓┗ ┛┳⊥﹃﹄┌ ┐└ ┘∟「」↑↓→←↘↙♀♂┇┅ ﹉﹊﹍﹎╭ ╮╰ ╯ *^_^* ^*^ ^-^ ^_^ ^︵^ ∵∴‖︱︳︴﹏﹋﹌︵︶︹︺ 【】〖〗@﹕﹗/\ " _ < > `,·。≈{}~ ~() _ -『』√ $ @ * & # ※ 卐々∞Ψ ∪∩∈∏ の ℡ ぁ §∮〝〞ミ灬ξ№∑⌒ξζω*〾⿻ㄨ ≮≯ +-×÷﹢﹣±/=∫∮∝ ∞ ∧∨ ∑ ∏ ∥∠ ≌ ∽ ≦ ≧ ≒﹤﹥じ☆veve↑↓⊙●★☆■♀『』◆◣◥▲Ψ ※◤ ◥ →№←㊣∑⌒〖〗@ξζω□∮〓※∴ぷ▂▃▅▆█ ∏卐【】△√ ∩¤々♀♂∞①ㄨ≡↘↙▂ ▂ ▃ ▄ ▅ ▆ ▇ █┗┛╰☆╮

    ……………………………………………………………………………………

    ⊙●○①⊕◎Θ⊙¤㊣★☆♀◆◇◣◢◥▲▼△▽⊿◤ ◥

    █ ▂ ▃ ▄ ▅ ▆ ▇ █ █ ■ ▓ 回 □ 〓≡ 

    ╝╚╔ ╗╬ ═ ╓ ╩ ┠ ┨┯ ┷┏ ┓┗ ┛┳⊥﹃﹄┌ 

    ┐└ ┘∟「」↑↓→←↘↙♀♂┇┅ ﹉﹊﹍﹎╭ ╮╰ ╯  

    *^_^* ^*^ ^-^ ^_^ ^︵^ ∵∴‖︱ ︳︴﹏﹋﹌︵︶︹︺ 

    【】〖〗@﹕﹗/\ " _ < > `,·。≈{}~ ~() _ -『』√  

    $ @ * & # ※ 卐 々∞Ψ ∪∩∈∏ の ℡ ぁ §∮〝〞ミ灬ξ№∑⌒ξζω*〾⿻ㄨ●

    ≮≯ +-×÷﹢﹣±/=∫∮∝ ∞ ∧∨ ∑ ∏ ∥∠ ≌ ∽ ≦ ≧ ≒﹤﹥
    -->
    </BODY>
    </HTML>

  • 相关阅读:
    AcWing 199. 余数之和
    AcWing 295. 清理班次
    AcWing 294. 计算重复
    Acwing 393. 雇佣收银员
    AcWing 362. 区间
    AcWing 361. 观光奶牛
    CSP-S 2019 Emiya 家今天的饭
    CSP-S 2019游记
    AcWing 345. 牛站 Cow Relays
    java 环境配置
  • 原文地址:https://www.cnblogs.com/yuanxiaoping_21cn_com/p/1332944.html
Copyright © 2011-2022 走看看