您所在的位置:小祥子 » 编程 » JavaScript » 正文

js省市区级联选择联动

时间:2015-08-12 编辑:柴九 来源:CnBlogs
 
 <!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
关键词:选择