Jquery读取xml并实现省市级联

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

[html] view plain copy print ?

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

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 plain copy print ?

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.     <script type="text/javascript" src="../JS/jquery-1.6.2.js" ></script> 
6. </head> 
7. <body> 
8. <form action="JS读取xml实现省市级联.htm"> 
9.     <select id="province"> 
10.     <option>--请选择--</option> 
11.     </select>省/直辖市/自治区 
12.     <select id="city"> 
13.     <option>--请选择--</option> 
14.     </select>市/区 
15.     <select id="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.youkuaiyun.com/zuiaizuoshou123/article/details/7247125