<!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. Ubuntu Cloud Image in Openstack

    Ubuntu出的云环境镜像(http://uec-images.ubuntu.com/trusty/current/trusty-server-cloudimg-amd64-disk1.img),已经 ...

  2. vue中子组件的拆分 父组件与子组件之间的传值

    vue是组件式开发,尽量独立出子组件 prop():父组件传值给子组件 $emit():子组件传值给父组件 子组件中的设置: 使用bind <template> : default-che ...

  3. Avro-RPC client in Flume

    Avro used in Flume Define the interface of RpcClient public interface RpcClient { public int getBatc ...

  4. 《ArcGIS Runtime SDK for Android开发笔记》——（11）、ArcGIS Runtime SDK常见空间数据加载

    ArcGIS Runtime SDK for Android 支持多种类型空间数据源.每一种都提供了相应的图层来直接加载,图层Layer是空间数据的载体,其主要继承关系及类型说明如下图所示: 转载请注 ...

  5. python进程与线程介绍

    很多同学都听说过,现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务.打个比方,你 ...

  6. Mysql事务级别 (二)

    事务分为4个等级: 1.read uncommitted(未提交读)     :无法避免脏读.不可重复读.虚读(幻读) 2.read committed (提交读)        :可以避免脏读 3. ...

  7. Orchard Core 文档翻译 （三） Orchard Core Modules

    原文连接:https://www.cnblogs.com/Qbit/p/9746442.html 转载请注明出处 介绍 Orchard Core Modules库提供了一种机制,可以拥有一个独立的模块 ...

  8. May 16th 2017 Week 20th Tuesday

    The most fearful enemy is not having a firm conviction. 最可怕的敌人,就是没有坚强的信念. A firm conviction or belie ...

  9. 技术blog

    看到好多人都写技术blog,发现自己工作了快两年居然都没有写过blog,很是惭愧,遂从今天开始不定期更新技术体验,主要是为了记下自己学习摸索技术过程中的经验以及问题解决方案.

  10. c++中的const用法（很详细）——转

    http://www.cnblogs.com/ymy124/archive/2012/04/16/2451433.html const给人的第一印象就是定义常量. (1)const用于定义常量. 例如 ...