基于数组级联列表

最新推荐文章于 2022-10-01 12:31:09 发布

lucky芬

最新推荐文章于 2022-10-01 12:31:09 发布

阅读量543

点赞数

分类专栏：数据循环

本文链接：https://blog.csdn.net/daimomo000/article/details/54728557

版权

数据循环专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>基于数组级联列表</title>
    <script type="text/javascript">
		// 采用JSON格式来存储相应的数据和编码
		var proJSON={"1":"广东省","2":"湖北省"};
		var cityJSON={"1":{'020':'广州','0755':'深圳','0756':'珠海'},'2':{'027':'武汉','0710':'襄樊','0715':'赤壁'}}
		window.οnlοad=function(){
			var province=document.getElementById("province");
			for(temp in proJSON){
				province.add(new Option(proJSON[temp],temp));	
			}
		}	
		function setCity(){
			// 只要触发了此事件,则二级菜单必须还原
			var city=document.getElementById('city');
			city.options.length=1;
			// 获取被选中省会的值
			var val=document.getElementById("province").value;
			console.info("cityJSON:" + cityJSON[val]);
			// 如果没有选择任何省会信息则直接返回
			if(!cityJSON[val]) return;
			// 通过选中的值获取二级菜单的json数据
		    var sonJSON=cityJSON[val];
			for(temp in sonJSON){
				city.add(new Option(sonJSON[temp],temp));	
			}
		}
    </script>
</head>
<body>
   <!-- 数据的三种存储方式: 
        	1: 数据库: 安全高、可以存储有结构但是耗资源
            2: properties: 存储非敏感数据,且Key value格式,省资源的
            3: XML: 存储非敏感数据,且支持有结构 目前一般用于配置文件
            4: 硬编码: 主要存储非敏感数据,且不改不的数据
   -->
   <select id="province" onChange="setCity()">
   		<option value="">--选择省会--</option>
   </select>
   <select id="city">
   		<option value="">--选择城市--</option>
   </select>
</body>
</html>

lucky芬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于数组级联列表

基于数组级联列表 // 采用JSON格式来存储相应的数据和编码 var proJSON={"1":"广东省","2":"湖北省"}; var cityJSON={"1":{'020':'广州','0755':'深圳','0756':'珠海'},'2':{'027':'武汉','0710':'襄樊','0715':'赤壁'}} window.onload=function(
复制链接

扫一扫