省、市、区 jQuery级联
JQuery代码...
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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代码...
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <table style="border: 1px solid gray"> 2 <tr> 3 <td align="center" style="width: 130px;"> 4 <select id="SelProvince" style="width: 100px;"> 5 <option>请选择</option> 6 </select> 7 </td> 8 <td align="center" style="width: 130px;"> 9 <select id="SelCity" style="width: 100px; display: none; margin-left: 10px;"> 10 <option>请选择</option> 11 </select> 12 </td> 13 <td align="center" style="width: 130px;"> 14 <select id="SelArea" style="width: 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
勿喷,
请多提意见...