核心产品
帮助中心
时间：2021-05-28
本文实例讲述了AngularJS实现的省市二级联动功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 省市二级联动</title></head><style> *{ margin:0; padding:0; } .ul{ list-style:none; display:inline-block; } .selectOption ul li{ display:inline-block; width:50px; padding:5px; } ul li:hover{ background-color:#59C0F3; color:#fff; cursor:pointer; } .container{ display:inline-block; } dl{ display: inline-block; } dl dt{ display: inline-block; } .container{ position:relative; text-align: left; vertical-align:top; } .selectBoder{ width:150px; height:20px; margin:0 auto; margin-bottom:5px; cursor:pointer; border:1px solid #808080; padding:2px 5px; font-size:14px; } .selectBoder:hover{ border-color:#59C0F3; } .selectOption:before{ width: 0; height: 0; border-bottom: 50px solid #ffffff; border-left: 50px solid transparent; border-right: 50px solid transparent; } .selectOption{ font-size:14px; position:absolute; background-color: #ffffff; z-index:9999; border:1px solid #eee; width:360px; padding:3px 5px; box-shadow: 5px 5px 10px #888888; } .button{ width:30px; height:30px; display: inline-block; background-color:#59C0F3; text-align:center; line-height: 25px; cursor:pointer; font-size:24px; color:#fff; margin:0 5px; border-radius:30px; } .button:hover{ background-color:#12bb16; }</style><body ng-app="myApp" ng-controller="myControl"><div class="inline" ng-repeat = "option in options"><div class="container"> <dl> <dd class="selectBoder" ng-click="choseP($index)" ng-value="false">{{option.province}}</dd> <dt class="selectOption" ng-if="option.ifShowProvince" ng-mouseleave="leaveProvince(option)"> <ul> <li ng-repeat = " x in province" ng-value="x.value" ng-click="choseProvince($event.target,option)" data-name="{{x.name}}">{{x.name}}</li> </ul> </dt> </dl></div><div class="container"> <dl> <dd class="selectBoder" ng-click="choseC($index)" ng-value="false">{{option.city}}</dd> <dt class="selectOption" ng-if="option.ifShowCity" ng-mouseleave="leaveCity(option)"> <ul> <li ng-repeat = "y in option.cities" ng-value="y.value" ng-click="choseCity($event.target,option)" data-name="{{y.name}}">{{y.name}}</li> </ul> </dt> </dl></div> <span class="button" ng-click="addChose($index)">+</span> <span class="button" ng-click="deleteChose($index)">-</span></div></div></body><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><script type="text/javascript" src="../js/angular.min.js"></script><script type="text/javascript"> var app = angular.module('myApp',[]); app.controller('myControl',function($scope){ $scope.ifShowCity = false; $scope.ifShowProvince = false; $scope.options =[{index:"0",ifShowCity:false,ifShowProvince:false,province:"",city:"",cities:""}]; $scope.leaveProvince = function(option){ $.each($scope.options,function(index,item){ if(option == $scope.options[index]){ $scope.optionIndex = index; } }) $scope.options[$scope.optionIndex].ifShowProvince = false; } $scope.leaveCity = function(option){ $.each($scope.options,function(index,item){ if(option == $scope.options[index]){ $scope.optionIndex = index; } }) $scope.options[$scope.optionIndex].ifShowCity = false; } $scope.choseProvince = function(target,option){ $.each($scope.options,function(index,item){ if(option == $scope.options[index]){ $scope.optionIndex = index; } }) $scope.options[$scope.optionIndex].ifShowProvince = false; $scope.options[$scope.optionIndex].province = target.getAttribute("data-name"); $.each($scope.province,function(index,item){ if(item.value == target.getAttribute("value")){ $scope.options[$scope.optionIndex].cities = item.children; } } ) } $scope.choseCity = function(target,option){ $.each($scope.options,function(index,item){ if(option == $scope.options[index]){ $scope.optionIndex = index; } }) $scope.options[$scope.optionIndex].ifShowCity = false; $scope.options[$scope.optionIndex].city = target.getAttribute("data-name"); } function getPrarms(){ return $scope.options; } $scope.sub = function(){ getPrarms(); } $scope.province = [{ name: "湖北省", value: "01", children: [{ name: "武汉", value: "0101" }, { name: "黄冈", value: "0102" }, { name: "荆州", value: "0103" }, { name: "十堰", value: "0104" }, { name: "黄石", value: "0105" }, { name: "鄂州", value: "0106" }, { name: "咸宁市", value: "0107" }, { name: "襄阳市", value: "0108" } ] },{ name: "广东省", value: "02", children: [{ name: "广东", value: "0201" }, { name: "深圳", value: "0202" }, { name: "佛山", value: "0203" }, { name: "惠州", value: "0204" }, { name: "东莞", value: "0205" }] },{ name: "河北省", value: "03", children: [{ name: "北京", value: "0301" }, { name: "邯郸", value: "0302" }, { name: "邢台", value: "0303" }, { name: "保定", value: "0304" }, { name: "秦皇岛", value: "0305" } ]} ] $scope.choseP = function($index){ $scope.options[$index].ifShowProvince = !$scope.options[$index].ifShowProvince; $scope.options[$index].ifShowCity = false; } $scope.choseC = function($index){ $scope.options[$index].ifShowCity = !$scope.options[$index].ifShowCity; $scope.options[$index].ifShowProvince = false; } $scope.addChose = function($index){ if($scope.options.length < 10){ $scope.options.splice($scope.options.length,0,{ //从最后面添加内容 index:$scope.options.length,ifShowCity:false,ifShowProvince:false }); $scope.canDelete = true; }else{ $scope.canAdd = false; } } $scope.deleteChose = function($index){ if($scope.options.length >1){ $scope.options.splice($index,1); //从当前行删除。 } if($index == 1){ $scope.canDelete = false; } } });</script></html>更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。
复制代码代码如下:AjaxPro实现二级联动AjaxPro实现二级联动 省份城市functionShowCity(id){varres=Test.Ge
jQuery1.3.2简单实现select二级联动复制代码代码如下:jQuery二级联动$(document).ready(function(){$("#pro
二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联
在开发过程中，遇到过非常多的二级联动，下面是我总结出来的几种二级联动案例二级联动（1）第一种案例是一种比较简单的二级联动，利用jquery的显示隐藏来实现，对于
本文实例讲述了AngularJS实现的select二级联动下拉菜单功能。分享给大家供大家参考，具体如下：所属分类：--请选择----请选择--varcontan
