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="/Content/js/jquery-1.7.2.min.js"></script>
  7     <script type="text/javascript" src="/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,TownID
101         *@author：叶明龙
102         *@time：2014/06/09
103         */
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

来源：https://www.cnblogs.com/jiuge/p/4723554.html
标签
change