李刚JavaScript视频学习-JSON

最新推荐文章于 2022-07-12 20:41:15 发布

花花小狼

最新推荐文章于 2022-07-12 20:41:15 发布

阅读量629

点赞数

分类专栏： JS&JQUERY

JS&JQUERY 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

利用JSON做的级联菜单

页面代码

<html>
	<head>
		<title>级联菜单</title>
	</head>
	<body>
		<select id="provinces" style="width:150px"></select>
		<select id="cities"  style="width:150px"></select>
		<script type="text/javascript" src="cascade.js"></script>
		<script type="text/javascript">
		
		</script>
	</body>
</html>

js代码：

var data=[
	{
		id:1, name:"湖南",
		cities :[
			{id:11,name:"长沙"},
			{id:12,name:"岳阳"},
			{id:13,name:"益阳"},
			{id:14,name:"衡阳"}
		]
	},
	{
		id:2, name:"湖北",
		cities :[
			{id:21,name:"武汉"},
			{id:22,name:"鄂州"},
			{id:23,name:"荆州"},
			{id:24,name:"赤壁"}
		]
	},
	{id:3, name:"四川",
		cities :[
			{id:31,name:"成都"},
			{id:32,name:"南充"},
			{id:33,name:"棉阳"},
			{id:34,name:"汶川"}
		]
	},
	{id:4, name:"江西",
		cities :[
			{id:41,name:"南昌"},
			{id:42,name:"九江"},
			{id:43,name:"上饶"},
			{id:44,name:"赣州"}
		]
	}
];

var provinces=document.getElementById("provinces");
var cities=document.getElementById("cities");

//清空
provinces.innerHTML="";
//pro代表data的每一个key
//JS key只能是字符串
for(var i=0,len=data.length;i<len;i++){
	//var opt=new Option(data[i].id,data[i].name);
	var opt=document.createElement("option");
	opt.value=data[i].id;
	opt.innerHTML=data[i].name;
	
	provinces.appendChild(opt);
}

provinces.οnchange=function (){
	cities.innerHTML="";
	var proId=provinces.value;//对应选中的id值
	for(var i=0,len=data.length;i<len;i++){
		if(data[i].id==proId){
			var cityData=data[i].cities;
			for(var i=0,len=cityData.length;i<len;i++){
				//var opt=new Option(cityData[i].id,cityData[i].name);
				var opt=document.createElement("option");
				opt.value=cityData[i].id;
				opt.innerHTML=cityData[i].name;
				cities.appendChild(opt);
			}
			break;
		}
	}
	
}