Javascirpt实现省市地区select列表,Json存储
最近,在重构代码的时候对于省市级联的处理上一直用ajax请求来实现,对于数据库操作频繁,想起来了之前看见亚马逊的页面有这样的一个省市区格式的Json数据,自己也想试一下。至于是否要去监听后台省市区的更新和重新生成json格式数据,暂时没去试验。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <select id="provinces"> <option value="">请选择</option> </select> <select id="cites"> <option value="">请选择</option> </select> </body> <script type="text/javascript"> var oProvinceSelect=document.getElementById("provinces"); var oCitySelect=document.getElementById("cites"); var oOption;// option对象 var oCities;// 城市列表对象 var nCitiesLength;// 城市列表长度 var area=[{"num":"11","name":"北京","children":[{"num":"02","name":"西区"},{"num":"03","name":"南区"},{"num":"05","name":"东区"},{"num":"08","name":"海淀"},{"num":"12","name":"通州"},{"num":"13","name":"顺义"},{"num":"14","name":"昌平"},{"num":"15","name":"大兴"},{"num":"17","name":"平谷"},{"num":"18","name":"怀柔"},{"num":"20","name":"延庆"},{"num":"28","name":"密云"},{"num":"29","name":"门头沟"}]},{"num":"4A","name":"深圳","children":[{"num":"03","name":"深圳"}]}]; /* province_select初始化 */ for(var i=0;i<area.length;i++){ oOption=document.createElement('option'); oOption.text=area[i].name; oOption.value=area[i].num; oProvinceSelect.add(oOption,null); } oProvinceSelect.onchange=function(){ nCitiesLength=oCitySelect.length; for(var z=1;z<nCitiesLength;z++){ oCitySelect.remove(1); } for(var j=0;j<area.length;j++){ if(area[j].num==oProvinceSelect.value){ oCities=area[j].children; for(var k=0;k<oCities.length;k++){ oOption=document.createElement('option'); oOption.text=oCities[k].name; oOption.value=oCities[k].num; oCitySelect.add(oOption,null); } } } } </script> </html>