这个地址联动是基于 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. Selenium Webdriver 动态设置 Proxy

    Step 1: Visiting "about:config" driver.get("about:config"); Step 2 : Run script ...

  2. 兼容多种模块规范(AMD,CMD,Node)的代码

    在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内. AMD规范 AMD,即“异步模块定义 ...

  3. contains方法

    contains方法,表示判断是否有当前字符串,有为true,没有为false; String str ="今天的菜谱有:QQ,当地,单独,方法,额额,混合,存储,最终,看看."; ...

  4. 谈谈程序猿求职简历的STAR法则

    最近Android/IOS的市场都有点躁动,前两天看业内几位大牛写的关于求职招聘的文章,觉得说的很有道理,暂且吸收进来,同时讲一下简历面试中使用STAR法则.我们在写简历或者面试时,最主要的一个目的, ...

  5. Flask消息闪现

    目录 Flask消息闪现 简单的例子 闪现消息的类别 过滤闪现消息 Message Flashing 参考 Flask消息闪现 一个好的应用和用户界面都需要良好的反馈.如果用户得不到足够的反馈,那么应 ...

  6. 32_使用BeanUtils工具包操作JavaBean

      由于对属性设置值和得到值的需求很多,使用频率很高,所以有一些开源勇士 不满足于JavaBean API 中IntroSpector来操作bean, 写出来了通用的BeanUtils工具,来进一步简 ...

  7. MATLAB最小二乘法

    MATLAB最小二乘法 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 三.实验程序 四.实验内容 设有如下数据: 用3次多项式拟合这组数据. 五.解答( ...

  8. Alpha冲刺 - 事后诸葛亮

    Alpha冲刺 - 事后诸葛亮 Alpha完成情况表 Stardust(安卓端) 模块 预期计划 现实进展 完成度 登录/注册 登录时,从服务器拉取的数据并同步数据库.获取的数据有:用户名.密码.记录 ...

  9. Beta冲刺！ Day4 - 砍柴

    Beta冲刺! Day4 - 砍柴 今日已完成 晨瑶:追进度 昭锡:改主页UI(还在 永盛:完成大部分接口和接口文档,上线代码 立强:文章去广告,适配手机屏幕.第三方编辑器整合到记录模块. 炜鸿:完成 ...

  10. jQuery.form 的最新版本是 3.14

    http://www.oschina.net/news/32628/jquery-form-3-14 有日子没跟进 jQuery.form 插件了,该插件已经从 2.xx 更新到 3.xx 了,目前最 ...