您现在的位置：雨哲在线 >> 文章教程 >> Web开发 >> HtmlJs >> 查看文章内容

无限级连动下拉菜单

【字体：小大】热 ★★★ 作者：未知文章来源：http://www.yz81.com 点击数：721 更新时间：2007-11-01 阅读点数：0点

载入中

功能介绍：
无限级连动下拉菜单
IE/Mozilla广泛支持
单函数调用
设置极其方便
可取值也可以传值

函数原型：
function drawSelect(obj,dicName[[[[[,mode],name],value],tips,]prop])
参数说明：
obj:放置下拉菜单的容器，没有请置null
dicName:下拉菜单选项的数组（风声无限级路径规则）
mode:0,按值传/取值；1，按标题路径传/取值；2,按标题传/取值；3，按值路径传/取值
name:下拉菜单的名称/ID ，供取值用
value:下拉菜单的初始值（按路径/标题两种形式，由mode决定）
tips:提示选项，没有为空
prop:补充属性，可以定义select的style,disable等

以下是代码片段：

<script language="javascript">
//<!--
var arrArea=new Array(
[0,"中国大陆","10"],
 [1,"湖北","1004"],
  [2,"鄂州市","1005"],
           [3,"大冶市","1027"],
   [3,"黄石市","1028"],
   [3,"阳新县","1029"],
  [2,"荆门","1030"],
   [3,"荆门市","1031"],
   [3,"京山县","1032"],
   [3,"沙洋县","1033"],
   [3,"钟祥市","1034"],
  [2,"荆州","1035"],
   [3,"公安县","1036"],
   [3,"洪湖市","1037"],
   [3,"监利县","1038"],
   [3,"江陵县","1039"],
   [3,"荆州市","1040"],
   [3,"石首市","1041"],
   [3,"松滋市","1042"],
  [2,"潜江市","1043"],
  [2,"神农架林区","1044"],
  [2,"十堰","1045"],
   [3,"丹江口市","1046"],
   [3,"房县","1047"],
   [3,"十堰市","1048"],
   [3,"郧西县","1049"],
   [3,"郧县","1050"],
   [3,"竹山县","1051"],
   [3,"竹溪县","1052"],
  [2,"随州","1053"],
   [3,"广水市","1054"],
   [3,"随州市","1055"],
  [2,"天门市","1056"],
  [2,"武汉市","1057"],
  [2,"仙桃市","1058"],
  [2,"咸宁","1059"],
   [3,"赤壁市","1060"],
   [3,"崇阳县","1061"],
   [3,"嘉鱼县","1062"],
   [3,"通城县","1063"],
   [3,"通山县","1064"],
   [3,"咸宁市","1065"],
  [2,"襄樊","1066"],
   [3,"保康县","1067"],
   [3,"谷城县","1068"],
   [3,"老河口市","1069"],
   [3,"南漳县","1070"],
   [3,"襄樊市","1071"],
   [3,"宜城市","1072"],
   [3,"枣阳市","1073"],
  [2,"孝感","1074"],
   [3,"安陆市","1075"],
   [3,"大悟县","1076"],
   [3,"汉川市","1077"],
   [3,"孝昌县","1078"],
   [3,"孝感市","1079"],
   [3,"应城市","1080"],
   [3,"云梦县","1081"],
  [2,"宜昌","1082"],
   [3,"长阳土家族自治县","1083"],
   [3,"当阳市","1084"],
   [3,"五峰土家族自治县","1085"],
   [3,"兴山县","1086"],
   [3,"宜昌市","1087"],
   [3,"宜都市","1088"],
   [3,"远安县","1089"],
   [3,"枝江市","1090"],
   [3,"秭归县","1091"],
  [2,"武穴市","3682"],
   [3,"\\","3683"],
 [1,"北京市","107"],
  [2,"北京市","108"],
  [2,"密云县","109"],
  [2,"延庆县","110"]
);
/* ******************** ******************** ******************************** */
function getRoute(dic,value,mode){
 var strRoute,intDepth=-1;
 for(var i=dic.length-1;i>-1;i--){
  if(intDepth>-1){
   if(intDepth==0) return(strRoute);
   if(dic[i][0]<intDepth){
    strRoute=i+","+strRoute;
    intDepth--;
   }
  }else{
   if(dic[i][mode]==value){
    strRoute=i.toString();
    intDepth=dic[i][0];
   }
  }
 }
 return(strRoute);
}
function getRoutes(dic,route,mode){
 var strRoute="",depth=0;
 var arrRoute=route.split(",");
 var intDepth=arrRoute.length-1;
 for(var i=0;i<dic.length;i++){
  if(dic[i][mode]==arrRoute[depth]){
   if(strRoute)strRoute+=","+i;
   else strRoute=i.toString();
   if(depth==intDepth)return(strRoute);
   else depth++;
  }
 }
 return(strRoute);
}
function drawSelect(obj,dicName){
 var argv=drawSelect.arguments;
 var argc=drawSelect.arguments.length;
 var mode=(argc>2)?argv[2]:0;
 var name=(argc>3)?argv[3]:"";
 var value=(argc>4)?argv[4]:"";
 var tips=(argc>5)?argv[5]:""; 
 var prop=(argc>6)?argv[6]:"";
 var beSel=(argc>7)?argv[7]:0;
 var dic=eval(dicName),objValue="",noSel=0;
 switch(mode){
  case 0:value=getRoute(dic,value,2);mode=5;break;
  case 1:value=getRoutes(dic,value,1);mode=6;break;
  case 2:value=getRoute(dic,value,1);mode=7;break;
  case 3:value=getRoutes(dic,value,2);mode=8;break;
 }
 var strRoute="",arrRoute=new Array();
 if(value)arrRoute=value.split(",");
 var strHtml="",arrHtml=new Array();
 var intDepth,strTitle,strValue,j,selDepth=0;
 for(var i=0;i<dic.length;i++){
  intDepth=dic[i][0];strTitle=dic[i][1];strValue=dic[i][2];
  if(intDepth==selDepth){ 
   if(arrHtml[selDepth]==null){
    arrHtml[selDepth]="<select onChange={drawSelect(this.parentNode,\""+dicName+"\","+mode+",\""+name+"\",this.value,\""+tips+"\",\""+prop+"\","+beSel+")} "+prop+">";
    if(tips){
     if(beSel)noSel=1;
     if(selDepth)arrHtml[selDepth]+="<option value=\""+strRoute+"\">"+tips+"</option>";
     else arrHtml[selDepth]+="<option value=\"\">"+tips+"</option>";
     if(arrRoute[selDepth]==null)arrRoute[selDepth]=-1;
    }else if(arrRoute[selDepth]==null)arrRoute[selDepth]=i;
   }
   if(i==arrRoute[selDepth]){
    noSel=0;
    arrHtml[selDepth]+="<option value=\""+strRoute+i.toString()+"\" selected>"+strTitle+"</option>";
    selDepth++;
    strRoute+=i.toString()+",";
    switch(mode){
     case 5:objValue=strValue;break;
     case 6:if(objValue)objValue+=","+strTitle;else objValue=strTitle;break;
     case 7:objValue=strTitle;break;
     case 8:if(objValue)objValue+=","+strValue;else objValue=strValue;break;
    }
   }else{
    arrHtml[selDepth]+="<option value=\""+strRoute+i.toString()+"\">"+strTitle+"</option>";
   }
  }else if(intDepth<selDepth){
   selDepth=intDepth;
   strRoute="";
   for(j=0;j<selDepth;j++)strRoute+=arrRoute[j]+",";
   arrHtml[selDepth]+="<option value=\""+strRoute+i.toString()+"\">"+strTitle+"</option>";
  }
 }
 for(i=0;i<arrHtml.length;i++){
  strHtml+=arrHtml[i]+"</select>";
 }
 if(noSel)objValue="";
 strHtml+="<input type=\"hidden\" value=\""+objValue+"\" name=\""+name+"\" id=\""+name+"\">";
 if(obj==null)document.write("<span>"+strHtml+"</span>");
 else obj.innerHTML=strHtml;
}
/* ******************** ******************** ******************************** */
drawSelect(null,"arrArea");//仅仅绘制菜单
document.write("<hr>");
drawSelect(null,"arrArea",1,"strArea","中国大陆,湖南,长沙,长沙市");
document.write("默认中国大陆,湖南,长沙,长沙市");
//-->
</script>

给文章部分内容增加权限[类似论坛购买贴][11-09]

留言本仿论坛模板及部分功能[11-08]

雨哲自定义表单系统 For SiteWeaver[11-07]

在线支付模板管理[11-07]

全站搜索 For SiteWeaver 通用[11-07]

企业会员展示系统[11-07]

本文短地址：http://www.yz81.com/?ArticleID=2173 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

上一篇文章： JS+CSS打造可拖动的聊天窗口层
下一篇文章： javascript中获取地址栏参数

[更多] 网友看法

数据载入中，请稍后……

发表评论

昵　称:		邮　箱:
评　分:	1分 2分 3分 4分 5分
内　容: （0/5000）插入链接
验证码:
雨哲提示：Alt+S快速发表

用户信息中心

与本文章相关内容

>> [文章教程]ASP把无限级分类生成数组　[日期：2007-10-22 18:15:35]
>> [文章教程]用Dreamweaver MX制作导航下　[日期：2007-02-09 22:34:47]
>> [文章教程]用DW MX制作导航下拉菜单　[日期：2007-02-09 22:34:28]

热门排行TOP10

推荐排行TOP10

[雨哲在线]最新公告

无限级连动下拉菜单