你的位置:首页 > Java教程

[Java教程]js省市区级联选择联动


 
 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5   <title>省市区级联选择</title> 6   <script type="text/javascript" src="http://www.cnblogs.com//Content/js/jquery-1.7.2.min.js"></script> 7   <script type="text/javascript" src="http://www.cnblogs.com//Content/js/public.js"></script> 8   <style type="text/css"> 9     body, html, ul { 10       margin: 0px; 11       padding: 0px; 12     } 13  14     #AreaList { 15       list-style-type: none; 16     } 17  18       #AreaList li { 19         float: left; 20         line-height: 30px; 21         height: 30px; 22         margin-right: 5px; 23       } 24   </style> 25 </head> 26 <body> 27   <ul id="AreaList"> 28     <li>省份:<select name="Provice" id="Provice"> 29   <option value="-1">请选择</option> 30 </select></li> 31     <li>城市:<select name="City" id="City"> 32   <option value="-1">请选择</option> 33 </select></li> 34     <li>县区:<select name="Town" id="Town"> 35   <option value="-1">请选择</option> 36 </select></li> 37     <li><span id="Msg"></span></li> 38   </ul> 39   <script type="text/javascript"> 40     var url = "/Pages/Hander/GetAreaTown.ashx"; 41     $(document).ready(function () { 42       BindOption("Provice", { "flag": "Areas", "Area_ID": 0 }, function () { 43         var areaCodes = ""; 44         if (areaCodes != "") { 45           loadProvice(areaCodes); 46         } 47       }); 48  49       $("#Provice").change(function () { 50         BindOption("City", { "flag": "Areas", "Area_ID": $("#Provice").val() }); 51         $("#City").trigger("change"); 52       }); 53  54       $("#City").change(function () { 55         BindOption("Town", { "flag": "Areas", "Area_ID": $("#City").val() }); 56         $("#Town").trigger("change"); 57       }); 58  59       $("#Town").change(function () { 60         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() } }; 61         //alert(values.Provice.name + ":" + values.Provice.value + "||" + values.City.name + ":" + values.City.value + "||" + values.Town.name + ":" + values.Town.value); 62         if (parent.areaChanger) 63           parent.areaChanger.call(this, values); 64       }); 65  66     }); 67  68     /** 69     *========================== 70     ****加载数据*** 71     *========================== 72     *@para Ajax请求参数 73     *@id:需要绑定的下拉框ID 74     *@fn:回调函数 75     */ 76     function BindOption(id, para, fn) { 77       $("#" + id).empty(); 78       $("#" + id).append("<option value=\"-1\">请选择</option>"); 79       if (para.Area_ID != "-1") { 80         changLoader(true, "Msg"); 81         getAjax(url, para, function (data) { 82           if (data.success) { 83             var list = data.data, opt = ""; 84             for (var i = 0; i < list.length; i++) { 85               opt += "<option value=\"" + list[i]['Area_ID'] + "\">" + list[i]['Area_Name'] + "</option>"; 86             } 87             $("#" + id).append(opt); 88           } 89           changLoader(false, "Msg"); 90           if (fn) 91             fn.call(this); 92         }); 93       } 94     } 95  96     /** 97     *========================== 98     ****加载数据*** 99     *==========================100     *@codeStr 城市区域字符串例如:13,1303,130603依次是ProviceID,CityID,TownID101     *@author:叶明龙102     *@time:2014/06/09103     */104     function loadProvice(codeStr) {105       var datas = codeStr.split(",");106       $("#Provice").val(datas[0]);107       BindOption("City", { "flag": "Areas", "Area_ID": datas[0] }, function () {108         $("#City").val(datas[1]);109       });110       BindOption("Town", { "flag": "Areas", "Area_ID": datas[1] }, function () {111         $("#Town").val(datas[2]);112       });113 114     }115 116   </script>117 </body>118 </html>

Provice.zip