jquery省市区三级(二级)联动
2012-07-06 13:59
477 查看
<head runat="server"> <title></title> <script src="js/jquery-1.7.min.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <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" /> </div> </form> </body>
/* 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 = "/js/json-array-of-province.js"; var jsonCity = "/js/json-array-of-city.js"; var jsonDistrict = "/js/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(); }); } setTimeout(function () { province.change(); }, 500); }, _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数据:
http://download.csdn.net/detail/dongdong0000856989/4414214
相关文章推荐
- 用jQuery实现省市区三级联动(可做插件)
- Jquery省市区/县三级联动代码,以及引用area.js插件
- jQuery实现省市区三级联动完整版源码演示下载
- JSON+Jquery省市区三级联动
- jQuery select表单提交省市区城市三级联动核心代码
- jQuery省市区三级联动
- 用php+mysql+ajax+jquery做省市区三级联动
- 省市区三级联动插件:app-jquery-cityselect.js
- JQuery实现省市区三级联动
- jQuery select表单提交省市区城市三级联动
- Jquery省市区三级联动案例
- jQuery 读取XML数据实现省市区三级联动
- 【JavaScript&jQuery】省市区三级联动
- 使用Ajax+jQuery实现省市区三级联动
- jquery 实现二级/三级/多级联动菜单的思路及代码
- jquery实现省市区三级联动
- 省市区二级或三级联动特效
- jquery省市区三级联动插件,无ajax
- 全国省市区三级联动(PHP+jQuery)
- jquery省市区三级联动