Javascirpt实现省市地区select列表,Json存储

最新推荐文章于 2025-06-28 09:32:57 发布

Geek41

最新推荐文章于 2025-06-28 09:32:57 发布

阅读量332

点赞数

文章标签： json java 数据库

本文介绍了一种使用JavaScript实现的省市区级联选择器，该选择器通过预加载包含省份及其下属城市的JSON数据，避免了对后台的频繁请求。文章提供了一个简单的HTML页面示例，展示了如何初始化省市区下拉列表并实现级联效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近,在重构代码的时候对于省市级联的处理上一直用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>