这个地址联动是基于 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. RNN，LSTM中如何使用TimeDistributed包装层，代码示例

    本文介绍了LSTM网络中的TimeDistributed包装层,代码演示了具有TimeDistributed层的LSTM网络配置方法. 演示了一对一,多对一,多对多,三种不同的预测方法如何配置. 在对 ...

  2. Android 开创java世界(JNI Invocation API)

    在Android的世界中,由名称为app_process的C++本地应用程序(路径为:framework/base/cmds/app_process/app_main.cpp)调用JNI Invoca ...

  3. LyX使用中的一些问题

    编译开始产生的检查错误 试用LyX2.3,在2.15中能编译通过的文档,竟然提示错误 The user preamble of your document contains glyphs that a ...

  4. Android系统启动流程（二）解析Zygote进程启动过程

    1.Zygote简介 在Android系统中,DVM(Dalvik虚拟机).应用程序进程以及运行系统的关键服务的SystemServer进程都是由Zygote进程来创建的,我们也将它称为孵化器.它通过 ...

  5. Flume-1.8.0_部署与常用案例

    该文章是基于 Hadoop2.7.6_01_部署 进行的 Flume官方文档:FlumeUserGuide 常见问题:记flume部署过程中遇到的问题以及解决方法(持续更新) 1. 前言 在一个完整的 ...

  6. 20个最常用的Windows命令行

    1. 中断命令执行Ctrl + Z 2. 文件/目录cd 切换目录例:cd // 显示当前目录例:cd .. // 进入父目录 3.创建目录md d:\mp3 // 在C:\建立mp3文件夹md d: ...

  7. if 嵌套if 的先后顺序的区别 (自测)

    # 验证 verify very good! # username = input("请输入用户名").capitalize()# password = input("请 ...

  8. JDBC学习笔记之SQLException介绍

    1. SQLException 的概述 当使用 JDBC 与数据源(在本文中的数据源表示我们实际使用的数据库)进行交互的时候遇见错误的时候,将会抛出名为 SQLException 的异常.一个 SQL ...

  9. EasyUI tabs指定要显示的tab

    <div id="DivBox"  class="easyui-tabs" style="width: 100%; height: 100%;& ...

  10. Android 怎样开启与关闭adb 的认证机制(google adb secure) (adb RSA 指纹认证)

    前言         欢迎大家我分享和推荐好用的代码段~~声明         欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net           ...