<!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. Csharp:user WebControl Read Adobe PDF Files In Your Web Browser

    namespace GeovinDu.PdfViewer { [DefaultProperty("FilePath")] [ToolboxData("<{0}:Sh ...

  2. 前端框架——Bootstrap

    一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...

  3. 初识rbac

    一.权限组件 1.项目与应用 一个项目可以有多个应用:一个应用可以在多个项目下:前提:应用是组件. 2.什么是权限? 一个包含正则表达式的url就是一个权限. 可以理解为如下方程式: who what ...

  4. CSS设计模式之三权分立模式篇 ( 转)

    转自 海玉的博客 市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容, ...

  5. select @@identity用法

    用select @@identity得到上一次插入记录时自动产生的ID 如果你使用存储过程的话,将非常简单,代码如下:SET @NewID=@@IDENTITY 说明: 在一条 INSERT.SELE ...

  6. C++基础--结构体声名

    struct是一种数据结构,当需要存储的相关数据为一个集合时,struct是很好的选择;例如,当存储student,学生的学号, 名字,年龄,身高,就构成了一个集合,用stuct声名为: typede ...

  7. C++基础--malloc和new的区别

    (1)malloc在C和C++中都可以使用,用来申请一段内存:申请的内存一定要用free释放,然后把指针置为null: new只能在C++中使用,用于动态内存分配:new的对象要delete掉: (2 ...

  8. Java使用POI操作Excel文件

    1.简介 Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式文件读和写的功能. 2.依赖的jar包 <!-- ex ...

  9. ArcGIS图框工具5.2发布，支持ArcGIS10.0,10.110.2，支持国家2000坐标系

    ArcGIS图框工具5.2发布,支持ArcGIS10.0,10.110.2,支持国家2000坐标系 下载地址http://files.cnblogs.com/gisoracle/atktoolnew. ...

  10. Android 实现电话录音（窃听）

    配置文件 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=&qu ...