这个地址联动是基于 Angularjs 的

效果图如下：

看着是不是可美观了？哈哈！源码如下：

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Angularjs 地址联动</title>

    <link rel="stylesheet" href="js/plugins/bootstrap/dist/css/bootstrap.min.css" />

</head>

<body ng-controller="appCtrl">

    <div class="row">

        <div class="col-sm-6 col-sm-offset-3">

            <div class="page-header" style="margin-bottom:200px;">

                <h1 class="text-center">Angularjs 地址联动2.1.1</h1>

            </div>

            <form class="form-horizontal">

                <div class="form-group">

                    <label class="col-sm-4 control-label">例子<span class="text-muted">（目前仅支持单例）</span></label>

                    <div class="col-sm-6">

                        <input select-address p="p" c="c" a="a" d="d" ng-model="xxx" placeholder="请选择所在地" type="text" class="form-control" />

                    </div>

                </div>

            </form>

        </div>

    </div>

    <!-- javascript

        ================================================== -->

    <script src="js/plugins/jquery/dist/jquery.min.js" type="text/javascript"></script>

    <script src="js/plugins/angular/angular.min.js" type="text/javascript"></script>

    <script src="js/selectAddress2.js" type="text/javascript"></script>

    <script src="js/index.js"></script>

</body>

</html>

哈哈，源码太多，直接提供下载地址：http://files.cnblogs.com/files/chenwolong/Address_Ang.rar

请务必将代码放入VS项目中，在本地会加载失败哦！

@陈卧龙的博客

Angularjs 地址联动2.1.1的更多相关文章

  1. 7.Android开源项目WheelView的时间和地址联动选择对话框

    类似WheelView的时间和地址联动选择对话框在现在App经常看到,今天小结下. 主布局界面: <LinearLayout xmlns:android="http://schemas ...

  2. 项目中的五级地址联动效果(js)

    我刚开始是的时候是是写了一个sql语句,但是写了5个函数,来联动地址的.后来请教了前段的师傅,用js来写了一个地址联动的. 我使用的是easyui的框架! 地址联动部分html代码! <tr&g ...

  3. vue mint-ui 三级地址联动

    我也是第一次写这种地址联动的 刚开始的时候 我还以为直接用select来写 后来公司的ios告知并不是这样的 他说应该时这样的 于是第一想法 赶紧找插件吧 但是找了一会未果  就问了公司大神 他刚开始 ...

  4. 配送城市地址联动选择JQuery

    记录一次使用jq实现3层地址联动选择流程!效果如图. 需要引入 jq.js.layer.js.layui.js.layui.css (icon图标) 二.选中后页面展示效果 三.页面展示HTML &l ...

  5. 微信小程序之地址联动

    这就是我们要实现的效果 <view class="consignee"> <!-- consignee 收件人 --> <text>收件人: & ...

  6. angularjs三级联动

    <div ng-controller="AjaxCtrl"> <h1>AJAX - Oriented</h1> <div> Coun ...

  7. 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践

    什么是 AngularJs?网上一大堆资料,没能真正说明白. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式, 有双向绑定,指令等特性,这是具有革命性 ...

  8. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  9. jquery_ajax 地址三级联动

    jquery 的三级地址联动,原理与javascript类似,只是在触发请求的时候,使用封装好的 $.get ,$post,$.ajax 方法去执行,其余的都是一样的,后台服务器请求文件是一样的,前台 ...

随机推荐

  1. HBuilder开发ios App离线打包启动画面无效的解决方法

    其中容易忽略的一点是manifest.json文件.plus下加入如下配置: "splashscreen": { "autoclose": false,/*如果 ...

  2. Flutter 安装

    都说程序猿学习是不分平台的,做了一辈子的Xaml,也想看看现在最牛逼的移动技术. 看了看Google 的Flutter,好像很牛逼,不怎么需要Android和IOS基础(应该还是要的), 不过现在是B ...

  3. python第九十天----jquery

    jQuery http://jquery.cuishifeng.cn/ 相当于js的模块,类库 DOM/BOM/JavaScript的类库 一.查找元素 jQuery 选择器 直接找到某个或者某个标签 ...

  4. php二维数组去重

    php二维数组去重 前言:php一维数组去重很简单,直接array_unique($arr)即可,但是二维数组去重就得自己去写了 二维数组去重方法: /* * 二维数组去重 * 注意:二维数组中的元素 ...

  5. 【爬坑】DataNode 无法正常启动解决方案

    0. 说明 DataNode 无法正常启动的原因 & 解决方案 1. 原因一 在 start-all.sh 之后 DataNode 无法正常启动,单独启动也启动不了 可能的原因 多次格式化,导 ...

  6. Dos命令讲解

    目录 一.什么是DOS 二.启动DOS的多种方法 三.DOS的内部命令与外部命令 四.系统环境变量讲解 增加Path环境变量路径 常见的系统环境变量 五.常用的运行命令 六.DOS使用技巧 设置CMD ...

  7. 解决Could not load file or assembly CefSharp.Core.dll的问题

    这个问题的中文提示是: 未能加载文件或程序集“CefSharp.Core.dll”或它的某一个依赖项.找不到指定的模块 具体原因是因为CefSharp运行时需要Visual C++ Redistrib ...

  8. mybatis的xml映射文件

    1,在进行统计查询时候,不想写映射的实体类,这时候设置返回的resultType类型是map <select id="getMap" resultType="jav ...

  9. 基于Redis实现一个安全可靠的消息队列

    http://doc.redisfans.com/list/rpoplpush.html

  10. 对原型（prototype）理解？

    Javascript是一种通过原型实现继承的语言,与别的高级语言是有区别的,像Java,C#是通过类型决定继承关系的,JavaScript是的动态的弱类型语言,总之可以认为JavaScript所有都是 ...