省市的三级联动

最新推荐文章于 2023-01-17 20:32:15 发布

ChenYatong_129

最新推荐文章于 2023-01-17 20:32:15 发布

阅读量266

点赞数

分类专栏：混合开发文章标签：三级联动

本文链接：https://blog.csdn.net/qq_41623299/article/details/79063731

版权

混合开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/angular.js" ></script>
		<title></title>
		<script>
		var app=angular.module("myApp",[]);
			app.controller("myCtrl",function($scope){
				//准备数据
				$scope.prolist=[
				{
					"pro":"山西",
					"city":[
					  {
					  	"name":"运城",
					  	"area":[{"aname":"运城1"},{"aname":"运城2"}]
					  },
					  {
					  	"name":"临汾",
					  	"area":[{"aname":"临汾1"},{"aname":"临汾2"}]
					  }
					]
				},
				{
					"pro":"河南",
					"city":[
					  {
					  	"name":"郑州",
					  	"area":[{"aname":"郑州1"},{"aname":"郑州2"}]
					  },
					  {
					  	"name":"开封",
					  	"area":[{"aname":"开封1"},{"aname":"开封2"}]
					  }
					]
				}
				
				
				];
				
				//改变事件
				$scope.prochange=function(){
					//点击省   得到市  区
					$scope.select2= $scope.select1.city[0];//得到市
				    $scope.select3= $scope.select2.area[0];//得到区
				}
				//点击城市的时候  获得区
				$scope.citychange=function(){
				    $scope.select3= $scope.select2.area[0];//得到区
					
				}
				
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		
		<!--查找所有信息里面的省份-->
		省<select	style="width: 120px;"
			ng-init="select1=prolist[0]"
			ng-model="select1"
			ng-change="prochange()"
			ng-options="item.pro for item in prolist"
			>
			</select>
			<!--select2=select1.city[0]  根据省获得城市   c.name  再从城市中得到name值 -->
		市<select
			style="width: 120px;"
			ng-init="select2=select1.city[0]"
			ng-model="select2"
			ng-change="citychange()"
			ng-options="c.name for c in select1.city "
			></select>
		区<select
			style="width: 120px;"
			ng-init="select3=select2.area[0]"
			ng-model="select3"
			ng-options="q.aname for q in select2.area "
			></select>
		
	</body>
</html>