二级联动

最新推荐文章于 2019-08-13 15:19:13 发布

wzb666946

最新推荐文章于 2019-08-13 15:19:13 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wzb666946/article/details/79797079

本文介绍了一个使用AngularJS实现的省份和城市下拉框联动选择器的示例。通过`ng-options`和`ng-model`指令，实现了根据所选省份自动更新对应城市的选项。同时提供了获取当前选中省份和城市的方法。

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

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="myapp" ng-controller="myctrl">

<select ng-init="select_provice=provices[0]" ng-model="select_provice" ng-options="x.provice for x in provices"
ng-click="changeProvice()" >

</select>

<select ng-init="select_city=select_provice.city[0]" ng-model="select_city" ng-options="c for c in select_provice.city">

</select><br /><br />

<input type="button" id="" value="获取省" ng-click="getProvice()" />
<input type="button" id="" value="获取市" ng-click="getCity()" />

<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {

$scope.provices=[
{"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 c=$scope.select_city;
alert(c);
}

});
</script>

</body>

</html>