您的位置：首页 > 其它

省市的三级联动

2018-01-15 13:55 211 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航