<!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>省市区级联选择</title>

     <script type="text/javascript" src="/Content/js/jquery-1.7.2.min.js"></script>

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

     <style type="text/css">

         body, html, ul {

             margin: 0px;

             padding: 0px;

         }

         #AreaList {

             list-style-type: none;

         }

             #AreaList li {

                 float: left;

                 line-height: 30px;

                 height: 30px;

                 margin-right: 5px;

             }

     </style>

 </head>

 <body>

     <ul id="AreaList">

         <li>省份:<select name="Provice" id="Provice">

     <option value="-1">请选择</option>

 </select></li>

         <li>城市:<select name="City" id="City">

     <option value="-1">请选择</option>

 </select></li>

         <li>县区:<select name="Town" id="Town">

     <option value="-1">请选择</option>

 </select></li>

         <li><span id="Msg"></span></li>

     </ul>

     <script type="text/javascript">

         var url = "/Pages/Hander/GetAreaTown.ashx";

         $(document).ready(function () {

             BindOption("Provice", { "flag": "Areas", "Area_ID": 0 }, function () {

                 var areaCodes = "";

                 if (areaCodes != "") {

                     loadProvice(areaCodes);

                 }

             });

             $("#Provice").change(function () {

                 BindOption("City", { "flag": "Areas", "Area_ID": $("#Provice").val() });

                 $("#City").trigger("change");

             });

             $("#City").change(function () {

                 BindOption("Town", { "flag": "Areas", "Area_ID": $("#City").val() });

                 $("#Town").trigger("change");

             });

             $("#Town").change(function () {

                 var values = { "Provice": { name: $("#Provice option:selected").text(), value: $("#Provice").val() }, "City": { name: $("#City option:selected").text(), value: $("#City").val() }, "Town": { name: $("#Town option:selected").text(), value: $("#Town").val() } };

                 //alert(values.Provice.name + ":" + values.Provice.value + "||" + values.City.name + ":" + values.City.value + "||" + values.Town.name + ":" + values.Town.value);

                 if (parent.areaChanger)

                     parent.areaChanger.call(this, values);

             });

         });

         /**

         *==========================

         ****加载数据***

         *==========================

         *@para Ajax请求参数

         *@id：需要绑定的下拉框ID

         *@fn：回调函数

         */

         function BindOption(id, para, fn) {

             $("#" + id).empty();

             $("#" + id).append("<option value=\"-1\">请选择</option>");

             if (para.Area_ID != "-1") {

                 changLoader(true, "Msg");

                 getAjax(url, para, function (data) {

                     if (data.success) {

                         var list = data.data, opt = "";

                         for (var i = 0; i < list.length; i++) {

                             opt += "<option value=\"" + list[i]['Area_ID'] + "\">" + list[i]['Area_Name'] + "</option>";

                         }

                         $("#" + id).append(opt);

                     }

                     changLoader(false, "Msg");

                     if (fn)

                         fn.call(this);

                 });

             }

         }

         /**

         *==========================

         ****加载数据***

         *==========================

         *@codeStr 城市区域字符串例如:13,1303,130603依次是ProviceID,CityID,TownID

         *@author：叶明龙

         *@time：2014/06/09

         */

         function loadProvice(codeStr) {

             var datas = codeStr.split(",");

             $("#Provice").val(datas[0]);

             BindOption("City", { "flag": "Areas", "Area_ID": datas[0] }, function () {

                 $("#City").val(datas[1]);

             });

             BindOption("Town", { "flag": "Areas", "Area_ID": datas[1] }, function () {

                 $("#Town").val(datas[2]);

             });

         }

     </script>

 </body>

 </html>
Provice.zip

js省市区级联选择联动的更多相关文章

  1. Js异步级联选择框实践方法

    HTML: <li> <span>所在地区:</span> <select name="prov" id="ddl_prov&q ...

  2. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  3. JS省市区联动

    JS省市区使用文档 一:服务器返回JSON格式要求如下网址里面data的格式:(拿KISSY组件data格式来做的) http://gallery.kissyui.com/cityselector/d ...

  4. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  5. JS 省市区三级联动

    JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  6. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  7. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  8. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  9. 省市区(县)三级联动代码（js 数据源）

    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

随机推荐

  1. Observer(观察者)设计模式[转]

    Observer设计模式中主要包括如下两类对象: Subject:监视对象,它往往包含着其他对象所感兴趣的内容.在本范例中,热水器就是一个监视对象,它包含的其他对象所感兴趣的内容,就是tempratu ...

  2. Django分页解析

    分页 django中实现管理数据分页的类位于 django.core.paginator.py中 Paginator类 对列表数据进行分页处理 对象 Paginator(Post.objects.al ...

  3. 【数据库】5.0 MySQL入门学习（五）——MySQL源码了解及MySQL初始化设置

    1.0 MySQL源码目录主要包括:客户端代码.服务端代码.测试工具.其他库文件.当然,看懂源代码得有一定的C语言基础. BUILD:各种平台的编译脚本,可以用来制作各平台的二进制版本 client: ...

  4. 使用 iframe + postMessage 实现跨域通信

    在实际项目开发中可能会碰到在 a.com 页面中嵌套 b.com 页面,这时第一反应是使用 iframe,但是产品又提出在 a.com 中操作,b.com 中进行显示,或者相反. 1.postMess ...

  5. CSS布局中的问题解决方式

    1.解决搜索框和按钮不对齐的方法 vertical-align属性只有两个元素设置为display:inline-block才有效 2.盒子莫名的分行现象 问题描述:比如父盒子宽度为960px,两个左 ...

  6. Qt之QSS（Q_PROPERTY-自定义属性）

    版权声明:进步始于交流,收获源于分享!纯正开源之美,有趣.好玩.靠谱...作者:一去丶二三里 博客地址:http://blog.csdn.net/liang19890820   目录(?)[+]   ...

  7. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  8. python编写脚本，删除固定用户下的所有表

    脚本如下: [oracle@ycr python]$ more t_del.py #/usr/bin/python#coding:utf8 import sysimport cx_Oracle i=0 ...

  9. js的作用域与作用域链

    JavaScript的作用域和作用域链.在初学JavaScript时,觉得它就和其他语言没啥区别,尤其是作用域这块,想当然的以为“全局变量就是在整个程序的任何地方都可以访问,也就是写在函数外的变量,局 ...

  10. x86 分页机制——虚拟地址到物理地址寻址

    x86下的分页机制有一个特点:PAE模式 PAE模式 物理地址扩展,是基于x86 的服务器的一种功能,它使运行 Windows Server 2003, Enterprise Edition 和 Wi ...