三级联动实例

最新推荐文章于 2022-02-05 22:27:04 发布

Loaging_Life

最新推荐文章于 2022-02-05 22:27:04 发布

阅读量381

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Loaging_Life/article/details/80051923

本文介绍如何使用Angular框架创建一个三级联动的选择器组件。该组件可以用于展示省、市、区等多层次的数据结构，并通过Angular的双向数据绑定实现联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
//数据源,省列表
$scope.proList = [{
"pname": "河南",
"citys": [{
"name": "郑州",
"area": [{
"aname": "郑1区"
}, {
"aname": "郑2区"
}]
}, {
"name": "开封",
"area": [{
"aname": "开1区"
}, {
"aname": "开2区"
}]
}]
},
{
"pname": "河北",
"citys": [{
"name": "石家庄",
"area": [{
"aname": "石1区"
}, {
"aname": "石2区"
}]
},
{
"name": "邯郸",
"area": [{
"aname": "邯1区"
}, {
"aname": "邯2区"
}]
}
]
}
];
//省改变事件的回调函数//省改变了，同时联动改变城市和区
$scope.proChange = function() {
$scope.select2 = $scope.select1.citys[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 ng-model="select1" ng-options="item.pname for item in proList" ng-init="select1=proList[0]" ng-change="proChange();"></select>

<select ng-model="select2" ng-options="data1.name for data1 in select1.citys" ng-init="select2=select1.citys[0]" ng-change="cityChange();"></select>

<select ng-model="select3" ng-options="data3.aname for data3 in select2.area" ng-init="select3=select2.area[0]"></select>
</body>

</html>