AngularJS实现的省市二级联动功能示例【可对选项实现增删】

2024-10-22 10:26:55

本文实例讲述了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程序设计有所帮助。

实例详解AngularJS实现无限级联动菜单

多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的还是异步的?对于初始值的回填发生在前端还是后端?如果异步加载,是否对于后端API的返回格式有严格的定义?是否容易实现同步.异步共存?是否可以灵活的支持各类依赖关系?菜单中是否有空值选项?--一系列的问题都需要精心处理. 带着这些需求搜索了一圈,不太出乎意料,并没有能在AngularJS的生态中找到一
AngularJS实现的select二级联动下拉菜单功能示例

本文实例讲述了AngularJS实现的select二级联动下拉菜单功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <script src="../script/angular.js"
基于angular实现三级联动的生日插件

写了一个生日联动插件具体的效果是这样的: 具体的数据我取得数据是今年的数据,如果是想要做三级联动的日期插件,改一下时间就好了 var app=angular.module("dataPicker",[]) app.factory('dataPicker', ['$http', '$q', function ($http, $q) { return { query: function () { var lengthYear=100; var dataPicker={ month:[],
Angularjs自定义指令实现三级联动选择地理位置

Angularjs自定义指令实现三级联动效果,先上图代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery 对 ajax的
Angularjs实现下拉框联动的示例代码

第一种联动方式,在网上看到的,感觉对于我的使用性不高,比较后端不会提供这种json... 实现截图 html <select ng-model="s1" ng-options="selectData.name for selectData in selectDatas"> <option value="">--产品类目--</option> </select> <select ng-model
AngularJS实现的省市二级联动功能示例【可对选项实现增删】

本文实例讲述了AngularJS实现的省市二级联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 省市二级联动</title> </head> <style> *{ margin:0; padding:0; } .u
jQuery+Asp.Net实现省市二级联动功能的方法

本文实例讲述了jQuery+Asp.Net实现省市二级联动功能的方法.分享给大家供大家参考,具体如下: 页面html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax.aspx.cs" Inherits="ThreeAjaxDrop_ddlAjax" %> <!DOCTYPE html PUBLIC "-//W3C//D
Vue配合iView实现省市二级联动的示例代码

在实现省市二级联动时,如果省份和城市写在一个数组对象中.可以根据,点击某个省份时获取到目标省份的id 是否同数组中的某个对象id一致来判断 iView中的on-change事件 on-change事件:即选中的Option变化时触发,默认返回 value.(value在这里只支持String和Number类型) 1.html部分 <template> <Form ref="formValidate" :model="formValidate"
Laravel框架基于ajax实现二级联动功能示例

本文实例讲述了Laravel框架基于ajax实现二级联动功能.分享给大家供大家参考,具体如下: 1.html页面: <div class="form-group"> <label for="rule">过期规则:</label> <select name="rule" id="rule" class="form-control" style="width:
JavaScript实现的级联算法示例【省市二级联动功能】

本文实例讲述了JavaScript实现的级联算法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht
vue学习之mintui picker选择器实现省市二级联动示例

本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh-cn2/popup Picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker Datetime picker日期选择器介绍:https://
JS实现的简单下拉框联动功能示例

本文实例讲述了JS实现的简单下拉框联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
JS实现简单省市二级联动

刚始学习java刚好看到用js实现省市二级联动的效果,就想着写篇博客,顺便检验下自己的学习成果. 好了废话少说先看看实际效果: 技术分析: 要实现这个功能呢,首先要用到html+js 这里用建一个下拉列表,绑定onchange事件 <select onchange="changeCity(this.value)"> <option>--请选择--</option> <option value="0">湖北</op
js实现的全国省市二级联动下拉选择菜单完整实例

本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

AngularJS实现的省市二级联动功能示例【可对选项实现增删】

相关推荐

随机推荐