基于jquery & json的省市区联动代码

效果演示： html代码：复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>省市区联动</title> <script src="/Scripts/jquery.min.js" type="text/javascript"></script> <script src="/Scripts/script.js" type="text/javascript"></script> </head> <body> <h2>Demo:</h2> <select id="province"> <option value="0">请选择省份</option> </select> <select id="city"> <option value="0">请选择城市</option> </select> <select id="district"> <option value="0">请选择区县</option> </select>  <input type="hidden" value="440000" id="pre_province"/> <input type="hidden" value="440500" id="pre_city"/> <input type="hidden" value="440511" id="pre_district"/> </body> </html> script.js代码：复制代码代码如下: /* author: elycir create: 2012-06 description: 省市区三级(二级)联动 */ $(function () { var citySelector = function () { var province = $("#province"); var city = $("#city"); var district = $("#district"); var preProvince = $("#pre_province"); var preCity = $("#pre_city"); var preDistrict = $("#pre_district"); var jsonProvince = "/content/json-array-of-province.js"; var jsonCity = "/content/json-array-of-city.js"; var jsonDistrict = "/content/json-array-of-district.js"; var hasDistrict = true; var initProvince = "<option value='0'>请选择省份</option>"; var initCity = "<option value='0'>请选择城市</option>"; var initDistrict = "<option value='0'>请选择区县</option>"; return { Init: function () { var that = this; that._LoadOptions(jsonProvince, preProvince, province, null, 0, initProvince); province.change(function () { that._LoadOptions(jsonCity, preCity, city, province, 2, initCity); }); if (hasDistrict) { city.change(function () { that._LoadOptions(jsonDistrict, preDistrict, district, city, 4, initDistrict); }); province.change(function () { city.change(); }); } province.change(); }, _LoadOptions: function (datapath, preobj, targetobj, parentobj, comparelen, initoption) { $.get( datapath, function (r) { var t = ''; // t: html容器 var s; // s: 选中标识 var pre; // pre: 初始值 if (preobj === undefined) { pre = 0; } else { pre = preobj.val(); } for (var i = 0; i < r.length; i++) { s = ''; if (comparelen === 0) { if (pre !== "" && pre !== 0 && r[i].code === pre) { s = ' selected="selected" '; pre = ''; } t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>'; } else { var p = parentobj.val(); if (p.substring(0, comparelen) === r[i].code.substring(0, comparelen)) { if (pre !== "" && pre !== 0 && r[i].code === pre) { s = ' selected="selected" '; pre = ''; } t += '<option value=' + r[i].code + s + '>' + r[i].name + '</option>'; } } } if (initoption !== '') { targetobj.html(initoption + t); } else { targetobj.html(t); } }, "json" ); } }; } (); citySelector.Init(); }); 省市区json数据文件：点击下载

　　推荐阅读

　　Jquery上传插件 uploadify v3.1使用说明

官方地址：http://www.uploadify.com/ 脚本之家提供的下载地址：http://www.jb51.net/jiaoben/21484.html官方英文文档：http://www.uploadify.com/documentation/ 使用方法(.net版本): 前台JS 复制代码代码如下: >>>详细阅读

本文标题：基于jquery & json的省市区联动代码

地址：http://www.17bianji.com/kaifa2/JS/23309.html

1/2 1