js省市级联实现。
for [element] in [collection] 用于循环下标,常用于jsonfor(index in arr){ ??console.info("下标："+index+"值："+arr[index]);}=====================分割线========================<html><head><meta charset="UTF-8"><title>基于JSON级联列表</title><script type="text/javascript">//JSON:主要用于数据交换，其次json就是有格式的字符串//var str = "{‘name‘:‘demo‘,‘age‘:‘18‘}";//这样写符合JSON语法（字符串用双引号）var str = ‘{"name":"demo","age":"18"}‘; console.info("当前类型为："+typeof(str));var obj = JSON.parse(str);console.info("当前类型为："+typeof(obj));//JSON输出访问的两种方式console.info(obj.name+","+obj.age+"||"+obj[‘name‘]+","+obj[‘age‘]);str=JSON.stringify(obj);console.info("当前类型为："+typeof(str));//采用JSON格式来存储相应的数据和编码var proJSON = {"1":"广东省"，"2":"湖北省"};var cityJSON = {"1":{"020":"广州","0755":"深圳","0756","珠海"},"2":{"027":"武汉","0710":"襄樊","0715":"赤壁"}}window.onload=function(){ ??????var province = document.getElementById("province"); ??????for(var temp in proJSOM){ ?????????province.add(new Option(proJSON[temp],temp)); ??????}}function setCity(){ ??//只要触发了此事件，则二级菜单必须还原 ??var city=document.getElementById(‘city‘); ??city.Option.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>--选择省会--</option> ??</select> ??<select id="city" > ?????<option>--选择城市--</option> ??</select></body></html>=====================分割线========================<html><head><meta charset="UTF-8"><title>基于数组级联列表</title><script type="text/javascript">//js中数组的下标支持中文var arr = new Array();arr[‘广东省‘] = [‘广州‘,‘深圳‘,‘珠海‘];arr[‘湖北省‘] = [‘武汉‘,‘襄樊‘,‘赤壁‘];window.onload=function(){ ????//向省会赋值下拉列表框 ????var proSel = document.getElementById("province"); ????for(var temp in arr){ ???????proSel.add(new Option(temp,temp)) ????}}function setCity(){ ??//清空当前下拉列表框的信息 ??var citySel = document.getElementById("city"); ??citySel.options.length=1; ??//获取选中的省会信息 ??var pro = document.getElementById(‘province‘).value; ??//如果选择获取提示信息则不执行 ??if(pro == ""){ ????return; ??} ??var citySel = document.getElementById(‘city‘); ??for(var i=0;i<arr[pro].length;i++){ ??????citySel.add(new Option(arr[pro][i],arr[pro][i])) ??}}</script></head><body> ??<select id="province" onChange="setCity()"> ?????<option>--选择省会--</option> ??</select> ??<select id="city" > ?????<option>--选择城市--</option> ??</select></body></html>js省市级联实现
原文地址：http://www.cnblogs.com/chenweichu/p/7669162.html