<!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>
HTML二级联动
猜你喜欢
转载自blog.csdn.net/qq_19681347/article/details/79794455
今日推荐
周排行