js省市区级联选择联动

 <!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省市区级联选择联动的更多相关文章

Js异步级联选择框实践方法
HTML: <li> <span>所在地区:</span> <select name="prov" id="ddl_prov&q ...
JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...
JS省市区联动
JS省市区使用文档一:服务器返回JSON格式要求如下网址里面data的格式:(拿KISSY组件data格式来做的) http://gallery.kissyui.com/cityselector/d ...
JS省市区联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...
JS 省市区三级联动
JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
省市区(县)三级联动代码（js 数据源）
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

随机推荐

node express formidable 文件上传后修改文件名
//我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = requi ...
轻松掌握java读写锁(ReentrantReadWriteLock)的实现原理
转载:https://blog.csdn.net/yanyan19880509/article/details/52435135 前言前面介绍了java中排它锁,共享锁的底层实现机制,本篇再进一步, ...
html-标题标签、水平线标签和特殊字符
标题标签 <h1></h1> <h2></h2> ...... <h6></h6> 从h1到h6,大小是依次变小,同时会自动换 ...
Js浮动广告效果实现
第一种漂浮广告不符合W3CJavaScript漂浮广告代码,很不错,代码精简,不过一次只有漂一个,复制就能用了.希望站长朋友喜欢. <html> <head> <ti ...
SQL 出现18456
SQL Server 2008R2 18456错误解决方案 SQL Server 2008R2 18456错误解决方案微软解释说,因密码或用户名错误而使身份验证失败并导致连接尝试被拒时,类似下面 ...
wxpython CustomTreeCtrl
转自 http://xoomer.virgilio.it/infinity77/Phoenix/lib.agw.customtreectrl.CustomTreeCtrl.html这个网址中有许多控件 ...
Azure 12 月新公布
Azure 12 月新发布:人脸识别 API 推出更新,媒体服务当前几种计量方式的调整,Azure Media Redactor 提供预览, Azure 密钥保管库开始计费, 和 Azure 支付方式 ...
服务器ipmi远程管理
DELL iDRAC (Integrated Dell™ Remote Access Controller )是 Dell PowerEdge 系列服务器上的远程管理方案, 11代 12代服务器已经集 ...
day014-反射、注解
1. Junit 1.1什么是Junit Junit是Java语言编写的第三方单元测试框架(工具). 1.2单元测试在Java中,一个类就是一个单元. 单元测试:开发中编写的一小段代码,用来检测类中 ...
day007-线程池、Lambda
1. 线程池就好生活中的游泳池,可以容纳多人在池子里游泳.戏水.线程池里可以有多个正在运行的线程,同时执行已经提交了的多个任务. 什么是线程池?一个用来创建和管理线程的容器. 线程池的原理线程复用 ...

js省市区级联选择联动

Provice.zip

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

随机推荐

热门专题