Jquery读取xml并实现省市级联

首先这是本人所使用的xml文档（Provice_city_town.xml），位置在根目录下的XML文件夹下。

[html] view plaincopyprint?

1. <?xmlversion="1.0"encoding="utf-8"?> 
2. <config> 
3.   <provincevalue="1"name="河北省"> 
4.     <city value="1"name="石家庄市"> 
5.       <countyvalue="1"name="桥东区"></county> 
6.       <countyvalue="2"name="长安区"></county> 
7.       <countyvalue="3"name="裕华区"></county> 
8.     </city> 
9.     <cityvalue="2"name="保定市"> 
10.       <countyvalue="21"name="安国市"></county> 
11.       <countyvalue="22"name="望都县"></county> 
12.       <countyvalue="23"name="徐水县"></county> 
13.     </city> 
14.     <city value="3"name="邯郸市"> 
15.       <countyvalue="31"name="大名县"></county> 
16.       <countyvalue="32"name="峰峰矿区"></county> 
17.       <countyvalue="33"name="武安市"></county> 
18.     </city> 
19.   </province> 
20.   <provincevalue="2"name="北京市"> 
21.     <cityvalue="11"name="西城区"></city> 
22.     <city value="12"name="海淀区"></city> 
23.     <cityvalue="13"name="朝阳区"></city> 
24.   </province> 
25.   <provincevalue="3"name="上海市"> 
26.     <city value="31"name="黄浦区"></city> 
27.     <cityvalue="32"name="静安区"></city> 
28.     <city value="33"name="闵行区"></city> 
29.   </province> 
30.   <provincevalue="4"name="四川省"> 
31.     <cityvalue="41"name="成都市"> 
32.       <countyvalue="41"name="武侯区"></county> 
33.       <countyvalue="42"name="锦江区"></county> 
34.       <countyvalue="43"name="双流县"></county> 
35.     </city> 
36.     <city value="42"name="乐山市"> 
37.       <countyvalue="51"name="峨眉山市"></county> 
38.       <countyvalue="52"name="沐川县"></county> 
39.       <countyvalue="53"name="夹江县"></county> 
40.     </city> 
41.     <cityvalue="43"name="眉山市"> 
42.       <countyvalue="61"name="仁寿县"></county> 
43.       <countyvalue="62"name="青神县"></county> 
44.       <countyvalue="63"name="洪雅县"></county> 
45.     </city> 
46.   </province> 
47. </config> 

<?xml version="1.0" encoding="utf-8" ?><config>  <province value="1" name="河北省">    <city value="1" name="石家庄市">      <county value="1" name="桥东区"></county>      <county value="2" name="长安区"></county>      <county value="3" name="裕华区"></county>    </city>    <city value="2" name="保定市">      <county value="21" name="安国市"></county>      <county value="22" name="望都县"></county>      <county value="23" name="徐水县"></county>    </city>    <city value="3" name="邯郸市">      <county value="31" name="大名县"></county>      <county value="32" name="峰峰矿区"></county>      <county value="33" name="武安市"></county>    </city>  </province>  <province value="2" name="北京市">    <city value="11" name="西城区"></city>    <city value="12" name="海淀区"></city>    <city value="13" name="朝阳区"></city>  </province>  <province value="3" name="上海市">    <city value="31" name="黄浦区"></city>    <city value="32" name="静安区"></city>    <city value="33" name="闵行区"></city>  </province>  <province value="4" name="四川省">    <city value="41" name="成都市">      <county value="41" name="武侯区"></county>      <county value="42" name="锦江区"></county>      <county value="43" name="双流县"></county>    </city>    <city value="42" name="乐山市">      <county value="51" name="峨眉山市"></county>      <county value="52" name="沐川县"></county>      <county value="53" name="夹江县"></county>    </city>    <city value="43" name="眉山市">      <county value="61" name="仁寿县"></county>      <county value="62" name="青神县"></county>      <county value="63" name="洪雅县"></county>    </city>  </province></config>

下面的是js代码，建议放在单独js文件中，本人暂时将放在HTML中。

[javascript] view plaincopyprint?

1. $(function () { 
2.     Bindprovice(); 
3.     $("#province").change(function () { 
4.         pid = $(this).val(); 
5.         $.ajax({ 
6.             url: "../XML/Provice_city_town.xml", 
7.             dataType: "xml", 
8.             success: function (data) { 
9.                 $("#city").empty().append($('<option></option>').val(0).html("--请选择--"));//这里注意添加empty()函数，在切换时要清空原有的内容 
10.                 $(data).find("province[value=" + pid +"]").children("city").each(function () {//查找value的选中项的省，然后查找子节点。 
11.                     $("#city").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name"))); 
12.                 }) 
13.             }, 
14.         }) 
15.     }) 
16.     $("#city").change(function () { 
17.         cid = $(this).val(); 
18.         $.ajax({ 
19.             url: "../XML/Provice_city_town.xml", 
20.             dataType: "xml", 
21.             success: function (data) { 
22.                 if ($(data).find("city[value=" + cid +"]").children("county").length > 0)//判断是否存在子节点 
23.                 { 
24.                     $("#county").next("span").show().end().show().empty().append($('<option></option>').val(0).html("--请选择--"));//如果存在子节点，则显示县级下拉框以及其后的文字。 
25.                     $(data).find("city[value=" + cid +"]").children("county").each(function () {//查找value的选中项的市，然后查找子节点。 
26.                         $("#county").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name"))); 
27.                     }) 
28.                 } else { 
29.                     $("#county").hide().next("span").hide();//如果无，则隐藏县级下拉框以及其后的文字。 
30.                 } 
31.             }, 
32.         }) 
33.     }) 
34. }) 
35.  
36. function Bindprovice() { 
37.     $.ajax({ 
38.         url: "../XML/Provice_city_town.xml", 
39.         dataType: "xml", 
40.         success: function (data) { 
41.             $("#province").empty().append($('<option></option>').val(0).html("--请选择--"));//这里注意添加的HTML文本要变成jquery类型，前面加$符号 
42.             $(data).find("province").each(function () {//这里注意function后面的括号，不能少写。 
43.                 $("#province").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name"))); 
44.             }) 
45.         }, 
46.     }) 
47. } 

$(function () {    Bindprovice();    $("#province").change(function () {        pid = $(this).val();        $.ajax({            url: "../XML/Provice_city_town.xml",            dataType: "xml",            success: function (data) {                $("#city").empty().append($('<option></option>').val(0).html("--请选择--")); //这里注意添加empty()函数，在切换时要清空原有的内容                $(data).find("province[value=" + pid + "]").children("city").each(function () { //查找value的选中项的省，然后查找子节点。                    $("#city").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name")));                })            },        })    })    $("#city").change(function () {        cid = $(this).val();        $.ajax({            url: "../XML/Provice_city_town.xml",            dataType: "xml",            success: function (data) {                if ($(data).find("city[value=" + cid + "]").children("county").length > 0) //判断是否存在子节点                {                    $("#county").next("span").show().end().show().empty().append($('<option></option>').val(0).html("--请选择--")); //如果存在子节点，则显示县级下拉框以及其后的文字。                    $(data).find("city[value=" + cid + "]").children("county").each(function () { //查找value的选中项的市，然后查找子节点。                        $("#county").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name")));                    })                } else {                    $("#county").hide().next("span").hide(); //如果无，则隐藏县级下拉框以及其后的文字。                }            },        })    })})function Bindprovice() {    $.ajax({        url: "../XML/Provice_city_town.xml",        dataType: "xml",        success: function (data) {            $("#province").empty().append($('<option></option>').val(0).html("--请选择--")); //这里注意添加的HTML文本要变成jquery类型，前面加$符号            $(data).find("province").each(function () { //这里注意function后面的括号，不能少写。                $("#province").append($('<option></option>').val($(this).attr("value")).html($(this).attr("name")));            })        },    })}

最下面的是HTML代码，位置在根目录下的HTML文件夹下。

[html] view plaincopyprint?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4.     <title>JS读取XML实现省市县级联</title> 
5.     <scripttype="text/javascript"src="../JS/jquery-1.6.2.js"></script> 
6. </head> 
7. <body> 
8. <form action="JS读取xml实现省市级联.htm"> 
9.     <selectid="province"> 
10.     <option>--请选择--</option> 
11.     </select>省/直辖市/自治区 
12.     <selectid="city"> 
13.     <option>--请选择--</option> 
14.     </select>市/区 
15.     <selectid="county"> 
16.     <option>--请选择--</option> 
17.     </select><span>县/县级市</span> 
18.     </form> 
19. </body> 
20. </html> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>JS读取XML实现省市县级联</title>    <script type="text/javascript" src="../JS/jquery-1.6.2.js" ></script></head><body><form action="JS读取xml实现省市级联.htm">    <select id="province">    <option>--请选择--</option>    </select>省/直辖市/自治区    <select id="city">    <option>--请选择--</option>    </select>市/区    <select id="county">    <option>--请选择--</option>    </select><span>县/县级市</span>    </form></body></html>

执行结果如下图所示：


此图为除直辖市外的省市截图

此图为四个直辖市的截图

以上内容转自网络：http://blog.csdn.net/zuiaizuoshou123/article/details/7247125