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.js异步编程解决方案之Promise用法
node.js异步编程解决方案之Promise var dbBase = require('../db/db_base'); var school_info_db = require('../db/s ...
- html-标题标签、水平线标签和特殊字符
标题标签 <h1></h1> <h2></h2> ...... <h6></h6> 从h1到h6,大小是依次变小,同时会自动换 ...
- SQLAlchemy的使用---增删改查
#通过SQLAlchemy对数据库进行增删改查 # 想要操作数据库 先要打开数据库连接 from create_table import engine # 创建会话 - 打开数据库连接 from sq ...
- 让zepto支持ie
找到zepto源码:修改为如下代码: zepto.Z = function(dom, selector) { dom = dom || [] // 支持ie10,主要是支持wp8 if(window. ...
- <form> 标签的 enctype 属性
值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编码.在使用包含文件上传控件的表单时,必须使 ...
- Linux漏洞分析入门笔记-CVE-2015-0235
Ubuntu 12.04 32位 ida 7.0 0x00:漏洞描述 1.glibc的__nss_hostname_digits_dots存在缓冲区溢出漏洞,导致使用gethostbyname系列函数 ...
- 【起航计划ObjC 001】印第安老斑鸠ObjC的幻想 ---- Ubuntu下安装并使用Obj-C
如何在最新版本的 Ubuntu下(14.10)来安装.编译Objective-C? Ubuntu已经有了对Objective-C的编译器(gobjc)的安装,因此安装gobjc的步骤可省,如果你用的U ...
- Not able to find Java executable or version转载
转载地址:https://blog.csdn.net/qq_40902122/article/details/79437991 findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件.N ...
- 关于main函数的参数，argc,argv的内部机制
偶尔对main函数的参数感兴趣,写了个程序验证. int main(int argc,char **argv) 首先,解释两点: 第一 .系统将参数列表,即我们在shell下输入的命令,存储到一个一维 ...
- thinkphp5设置403 404等http状态页面
在thinkphp5中如何抛出异常状态码(比如401,403,404等),因为这些能极大的给用户以良好的体验. 因为在上线阶段,任何的系统错误信息都不能让浏览用户给看到,比如404(Not Found ...