省、市、区 jQuery级联

JQuery代码...

View Code

 1 $(document).ready(function () {
 2     //加载省份列表信息
 3     $.ajax({
 4         url: "../Area.xml",
 5         dataType: "xml",
 6         success: function (xml) {
 7             $(xml).find("province").each(function () {                                                  //找到(province)省份节点;
 8                 $("<option></option>").html($(this).attr("name")).appendTo("#SelProvince");             //加载(province)省份信息到列表中
 9             })
10         }
11     })
12     //省份列表信息更改时，加载城市列表信息
13     $("#SelProvince").change(function () {
14         var value = $("#SelProvince").val();                                                            //省份值;
15         if (value != "请选择") {
16             $("#SelCity").css("display", "block").find("option").remove();                              //显示城市下拉列表框删除城市下拉列表中的数据;
17             $("#SelCity").html("<option>请选择</option>");                                              //加载城市列表中的请选择;
18             $("#SelArea").find("option").remove();                                                      //删除地区下拉列表中的数据;
19             $("#SelArea").html("<option>请选择</option>")                                               //加载地区列表中的请选择;
20             $.ajax({
21                 url: "../Area.xml",
22                 dataType: "xml",
23                 success: function (xml) {
24                     $(xml).find("[name='" + value + "']").find("city").each(function () {               //根据省份name属性得到子节点City节点name属性;
25                         $("<option></option>").html($(this).attr("name")).appendTo("#SelCity");         //加载City(城市)信息到下拉列表中;
26                     })
27                 }
28             })
29         }
30     })
31     //城市列表信息改变时，加载地区列表信息
32     $("#SelCity").change(function () {
33         var value = $("#SelCity").val();                                                                //城市值;
34         if (value != "请选择") {
35             $("#SelArea").css("display", "block").find("option").remove();                              //显示地区下拉列表框删除地区下拉列表中的数据;
36             $("#SelArea").html("<option>请选择</option>");                                              //加载地区列表中的请选择;
37             $.ajax({
38                 url: "../Area.xml",
39                 dataType: "xml",
40                 success: function (xml) {
41                     $(xml).find("[name='" + value + "']").find("country").each(function () {            //根据城市节点name得到子节点Area节点name属性;
42                         $("<option></option>").html($(this).attr("name")).appendTo("#SelArea");         //加载到Area(地区)下拉列表中;
43                     })
44                 }
45             })
46         }
47     })
48 });

Html代码...

View Code

 1 <table style="border: 1px solid gray">
 2         <tr>
 3             <td align="center" style=" 130px;">
 4                 <select id="SelProvince" style=" 100px;">
 5                     <option>请选择</option>
 6                 </select>
 7             </td>
 8             <td align="center" style=" 130px;">
 9                 <select id="SelCity" style=" 100px; display: none; margin-left: 10px;">
10                     <option>请选择</option>
11                 </select>
12             </td>
13             <td align="center" style=" 130px;">
14                 <select id="SelArea" style=" 100px; display: none; margin-left: 10px;">
15                     <option>请选择</option>
16                 </select>
17             </td>
18         </tr>
19     </table>

　　XML文件：https://files.cnblogs.com/guyg/Area.xml

　　勿喷，

　请多提意见...