这个地址联动是基于 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. excel单元格内换行的方法

    方法一:调整单元格格式换行 选定单元格,选择“格式→单元格”,在弹出的对话框中单击“对齐”,选中“自动换行”,单击[确定]按钮即可. 方法二:Alt+Enter键(使用强行换行时,系统会同时选择自动换 ...

  2. Linux Linux内核参数调优

    Linux内核参数调优 by:授客 QQ:1033553122 关于调优的建议: 1.出错时,可以查看操作系统日志,可能会找到一些有用的信息 2.尽量不要“批量”修改内核参数,笔者就曾这么干过,结果“ ...

  3. 简述 Spring Cloud 是什么2

    一.概念定义       Spring Cloud是一个微服务框架,相比Dubbo等RPC框架, Spring Cloud提供的全套的分布式系统解决方案. Spring Cloud对微服务基础框架Ne ...

  4. Head First Android --- Intent

    How to create the intentYou create an intent that specifies an action using the following syntax:whe ...

  5. 【PAT】B1059 C语言竞赛（20 分）

    这个题也是个逻辑问题 此题用我这种方式很复杂,应该用map 用两个分别储存成绩,已领过奖的人, #include<stdio.h> #include<math.h> int a ...

  6. 个人技术博客——linux服务器配置以及flask框架

    本次的软件工程实践,我负责我们组后台服务的搭建,我选用了bandwagon的服务器,安装的是Debian GNU/Linux,全程在root用户下操作,后端服务是用python的flask框架,数据库 ...

  7. Luogu P3462 [POI2007]ODW-Weights

    题目描述 While moving to a new compound the Byteotian Institute of Experimental Physics has encountered ...

  8. c++のmap的遍历

    一.定义如:map < int, CString > 或者 map < int, 结构体名>的元素遍历 map < int, CString >  map;     ...

  9. 面试被问http协议？这篇文章足够覆盖所有相关问题！

    http使用面向连接的TCP作为传输层协议.http本身无连接. 请求报文 CRLF是回车换行     方法为GET的请求报文     方法为POST的请求报文     方法 OPTIONS:这个方法 ...

  10. Java中关于CountDownLatch的使用

    CyclicBarrier工具类主要是控制多个线程的一起执行,演示程序: import java.util.Random; import java.util.concurrent.CountDownL ...