HTML二级联动

最新推荐文章于 2023-09-25 11:10:58 发布

WWGtest

最新推荐文章于 2023-09-25 11:10:58 发布

阅读量270

点赞数

分类专栏：前端Web 文章标签： HTML

本文链接：https://blog.csdn.net/qq_19681347/article/details/79794455

版权

前端Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级联动</title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
		
		<select
			ng-options="x.provice for x in datas"
			ng-model="select_provice"
			ng-init="select_provice=datas[0]"
			ng-click="changeProvice()"
			></select>
			
		<select
			ng-options="y for y in select_provice.city"
			ng-model="select_city"
			ng-init="select_city=select_provice.city[0]"
			></select>
			
		<button ng-click="getProvice()">获取省</button>
		<button ng-click="getCity()">获取市</button>
		
		<script type="text/javascript">
			var app = angular.module("myapp",[]);
			app.controller("myctrl",function($scope){
				$scope.datas=[
				{"provice":"河南","city":["杞县","湖岗","高阳","开封","郑州"]},
				{"provice":"北京","city":["后海","海淀","鸟巢","朝阳","黄埔"]},
				{"provice":"上海","city":["东方明珠","湖岗","高阳","开封","郑州"]}
				];
				
				$scope.changeProvice=function(){
					$scope.select_city=$scope.select_provice.city[0];
				}
				
				$scope.getProvice=function(){
					var p=$scope.select_provice.provice;
					alert(p);
				}
				
				$scope.getCity=function(){
					var p=$scope.select_city;
					alert(p);
				}
			});
		</script>
	</body>
</html>

WWGtest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML二级联动

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级联动&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js"
复制链接

扫一扫