省市联动

最新推荐文章于 2025-05-07 13:09:28 发布

转载最新推荐文章于 2025-05-07 13:09:28 发布 · 520 阅读

个人学习专栏收录该内容

28 篇文章

订阅专栏

1、初始化整个页面

2、添加各个元素，对代码进行抽取

3、改变联动属性

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>省市联动</title>
 </head>
	<script type="text/javascript">
	<!--
		var arr = ["中国","美国","日本"] ;
		  
		  arr["中国"] = ["北京","上海","钓鱼岛"] ;
		  arr["美国"] = ["纽约","华盛顿","旧金山"] ;
		  arr["日本"] = ["东京","大阪","神户"] ;
		
		  arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
		  arr["上海"] = ["浦东","金山","崇明","浦西"] ;
		  arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;

		  arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
		  arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
		  arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;

		  arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
		  arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
		  arr["神户"] = ["神户1","神户2","神户3","神户4"] ;

		  function init(){
			  //填充国家
			  fillData(arr,"country") ;

			   //填充省市
			  fillData(arr[arr[0]],"province") ;
			    //填充地区
			  fillData(arr[arr[arr[0]][0]],"area") ;
		  }

		  function fillData(arr,id){
			    //清空select选项
			  document.getElementById(id).options.length = 0 ;
			  //添加选项
			  for(var i = 0 ;i<arr.length ;i++){
				  //创建一个option对象
				  //第一种
				 /* var option = new Option() ;
				  option.text = arr[i] ;
				  option.value = arr[i] ;*/

				  //第二种
				  var option = new Option(arr[i],arr[i]) ;

				  //将option对象添加到select中
				  document.getElementById(id).options.add(option) ;
			  }
		  }

		  function changePro(coun){
			
			  //添加省市
			  fillData(arr[coun],"province") ;

			  //添加地区
			  fillData(arr[arr[coun][0]],"area") ;
		  }

		  function changeArea(pro){
			//改变地区
			fillData(arr[pro],"area") ;
		  }
	//-->
	</script>
 <body onload = "init()">
	 国家：<select id = "country" onchange = "changePro(this.value)"></select>
	 省市：<select id = "province" onchange = "changeArea(this.value)"></select>
	 地区：<select id = "area"></select>
 </body>
</html>