<!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. concat、concat_ws、group_concat函数用法

    一.concat()函数可以连接一个或者多个字符串 CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. select conc ...

  2. 01.使用File类读写文件

    使用File类去读数据: 方法一:使用ReadAllBytes(); 方法 namespace _01.使用File类读写数据01 { class Program { static void Main ...

  3. CSP学习之CryptoAPI初识

    Crypto API目的就是提供开发者在windows下使用PKI的编程接口. Crypto 提供了很多的加解密相关函数,如编码.解码.加密解密,哈希,数字证书.证书管理证书存储等.       有关 ...

  4. Oracle JDBC 连接卡死后 Connection Reset

    坑 这绝对是我碰计算机以来遇到的第一大坑! 症状: 在Linux主机上远程登录,执行一个简单的Oracle的JDBC连接程序(jar包),结果硬生生的卡在了连接建立验证阶段,然后等上几分钟后因为连接超 ...

  5. re模块——正则表达式操作

    一.什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它内嵌在Python中,并通过 r ...

  6. mysql七：索引原理与慢查询优化（待完整）

    一.介绍 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要. 索引优化应该是对查询性能优 ...

  7. asp.net中<input type=button>无法调用后台函数

    例如:用<input id="bt1" type="button" runat="server" Onclick="btnL ...

  8. JMeter 配置元件之-HTTP Cookie管理器-实现 Cookie 登录

    下面以购物App常用的收藏功能为例,讲述如何在 JMeter 中使用 cookie 进行登录态操作.具体的操作步骤如下所示: 第一步.录制查看收藏列表的 HTTP请求: 录制查看收藏列表的HTTP请求 ...

  9. matlab练习程序（差异演化DE）

    这两天在看M.Tim Jones的<人工智能>,书中不只介绍原理,而且都有相应的c代码实现. 虽然代码不完全,不过缺少的部分完全可以自己补完. 差异演化和昨天实现的PSO很类似,都属于优化 ...

  10. Linux添加alias简化命令

    一.简介 linux alias 是命令的一种别称,输入 alias 可以看到像下面这样的结果: alias vi="vim" 也即,输入vi后,被自动定向到vim这个命令了.al ...