级联 菜单
Posted 爱海滔滔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了级联 菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地域导航</title>
<link href="zui.min.css" rel="stylesheet">
</head>
<body>
<!--菜单-->
<div id="div1">
<ul class="tree" data-ride="tree" id="tree">
</ul>
</div>
<!--级联-->
<div class="t1">
<div class="left f">地区</div>
<div>
<select name="province" id="province"> <!--省-->
</select>
<select name="city" id="city"> <!--市-->
</select>
<select name="county" id="county"> <!--县-->
</select>
</div>
</div>
</body>
<script type="text/javascript">
//方法二
var diyu=[
{
"DIST_CODE": "13",
"AREA_NAME": "北京省",
"AREA_LEVEL": "0",
"PARENTCODE": "",
"PARENT_NAME": ""
},
{
"DIST_CODE": "1301",
"AREA_NAME": "一环市",
"AREA_LEVEL": "1",
"PARENTCODE": "13",
"PARENT_NAME": "北京省"
},
{
"DIST_CODE": "130101",
"AREA_NAME": "一环县",
"AREA_LEVEL": "2",
"PARENTCODE": "1301",
"PARENT_NAME": "一环市"
},
{
"DIST_CODE": "14",
"AREA_NAME": "广东省",
"AREA_LEVEL": "0",
"PARENTCODE": "",
"PARENT_NAME": ""
},
{
"DIST_CODE": "1401",
"AREA_NAME": "深圳市",
"AREA_LEVEL": "1",
"PARENTCODE": "14",
"PARENT_NAME": "广东省"
},
{
"DIST_CODE": "140101",
"AREA_NAME": "南山区",
"AREA_LEVEL": "2",
"PARENTCODE": "1401",
"PARENT_NAME": "深圳市"
},
{
"DIST_CODE": "15",
"AREA_NAME": "湖北省",
"AREA_LEVEL": "0",
"PARENTCODE": "",
"PARENT_NAME": ""
},
{
"DIST_CODE": "1501",
"AREA_NAME": "武汉市",
"AREA_LEVEL": "1",
"PARENTCODE": "15",
"PARENT_NAME": "湖北省"
},
{
"DIST_CODE": "150101",
"AREA_NAME": "武昌县",
"AREA_LEVEL": "2",
"PARENTCODE": "1501",
"PARENT_NAME": "武汉市"
}
]
function CLASS_LIANDONG_YAO(array){
//数组，联动的数据源
this.array=array;
this.indexName=‘‘;
this.obj=‘‘;
//设置子SELECT
// 参数：当前onchange的SELECT ID，要设置的SELECT ID
this.subSelectChange=function(selectName1,selectName2){
var obj1=document.all[selectName1];
var obj2=document.all[selectName2];
var objName=this.toString();
var me=this;
obj1.onchange=function(){
me.optionChange(this.options[this.selectedIndex].value,obj2.id)
}
}
//设置第一个SELECT
// 参数：indexName指选中项,selectName指select的ID
this.firstSelectChange=function(indexName,selectName){
this.obj=document.all[selectName];
this.indexName=indexName;
this.optionChange(this.indexName,this.obj.id)
} // indexName指选中项,selectName指select的ID
this.optionChange=function (indexName,selectName){
var obj1=document.all[selectName];
var me=this;
obj1.length=0;
obj1.options[0]=new Option("请选择",‘‘);
for(var i=0;i<this.array.length;i++){
if(this.array[i][1]==indexName){
obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
}
}
}
}
//var sheng = new Array();
//var shi=new Array();
//var xian=new Array();
//var sen=0;
//var si=0;
//var x=0;
var array = new Array();
for(var i=0;i<diyu.length;i++){
if(diyu[i].AREA_LEVEL== 0){
array[i]=new Array(diyu[i].AREA_NAME,"根目录",diyu[i].AREA_NAME);
//sheng[sen]=diyu[i];
//sen++;
}else if(parseInt(diyu[i].AREA_LEVEL)== 1){
array[i]=new Array(diyu[i].AREA_NAME,diyu[i].PARENT_NAME,diyu[i].AREA_NAME);
//shi[si]=diyu[i];
//si++;
}else if(parseInt(diyu[i].AREA_LEVEL)== 2){
array[i]=new Array(diyu[i].AREA_NAME,diyu[i].PARENT_NAME,diyu[i].AREA_NAME);
//xian[x]=diyu[i];
//x++;
}
}
console.log(array);
//这是调用代码
var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
liandong.firstSelectChange("根目录","province"); //设置第一个选择框
liandong.subSelectChange("province","city"); //设置子级选择框
liandong.subSelectChange("city","county");
</script>
<script src="jquery.min.js"></script>
<script src="zui.min.js"></script>
<script src="U.js"></script>
<script src="U_2.js"></script>
<script language="javascript">
setup();
</script>
</html>
以上是关于级联 菜单的主要内容，如果未能解决你的问题，请参考以下文章