Jquery读取xml并实现省市级联

最新推荐文章于 2020-05-05 10:45:02 发布

zuiaizuoshou123

最新推荐文章于 2020-05-05 10:45:02 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： xml jquery function html xhtml encoding

本文链接：https://blog.csdn.net/zuiaizuoshou123/article/details/7247125

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<?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中。

$(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文件夹下。

<!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>

执行结果如下图所示：

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

此图为四个直辖市的截图