这个地址联动是基于 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. PL/SQL Developer使用小技巧

    1.PL/SQL Developer记住登陆密码         在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码:    ...

  2. Loadrunner脚本开发-基于HTTP协议的流媒体视频在线播放服务器性能测试

    脚本开发-基于HTTP协议的流媒体视频在线播放服务器性能测试 by:授客 QQ:1033553122   目的 实现基于http协议的流媒体在线视频播放,服务器性能测试脚本,模拟用户浏览器方式在线播放 ...

  3. Android系统启动流程 总结

    整体流程大致如下:   Android系统的启动,主要是指Android手机关机后,长按电源键后,Android手机开机的过程.从系统角度看,Android的启动程序可分为:   1.bootload ...

  4. weblogic系列漏洞整理 -- 1. weblogic安装

    目录 0. 概述 1. 下载安装Java环境 2. 下载安装weblogic 安装 部署domain域 进入weblogic 3. 排错 如果出现如下错误 0. 概述 WebLogic是美国Oracl ...

  5. Access删除某一字段重复的数据但是要保留一条

    如下图所示,Checktime这个字段有很多重复数据,我需要把所有Checktime这个字段重复的都删掉,但是还需要保留一条: 在Access做删除查询怎么做呀,来个Access高手,复制粘贴党请手下 ...

  6. CSS| 框模型-定位及相關屬性

    CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

  7. Windows10 内存泄漏

    之前遇到win10开机idle一段时间后, 内存噌噌的往上彪, 16G内存基本什么东西没开就90%多.查了网上的一些解决方案: 方法1. 关闭Ndu服务 sc config Ndu start=dis ...

  8. 【PAT】B1042 字符统计（20 分）

    /* 15分的题很简单,但是自己写的时候在输入数据时没有考虑好下标 另外有忘记了输入字符时考虑是否有\n */ #include<stdio.h> #include<algorith ...

  9. KVM网络桥接模式解说

    在上一篇博客中,我画了一张图来解说桥接模式下kvm的网络是什么样子的.那今天我就仔细来解释一下这方面的内容,让大家学会配置桥接网络. 还是这样的一张图,我们知道bridge就是桥接网卡的名称.让虚拟机 ...

  10. 常见的web攻击方式

    跨站脚本攻击(XSS) 概述 跨站脚本攻击(XSS,Cross-site scripting),指攻击者在网页中嵌入恶意脚本程序,是最常见和基本的攻击WEB网站的方法.攻击者在网页上发布包含攻击性代码 ...