JQuery 加载并解析 XML实现省市联动

最新推荐文章于 2019-03-24 20:21:09 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： jquery xml

本文链接：https://blog.csdn.net/cckevincyh/article/details/53170706

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

JQuery 加载并解析 XML

JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.
JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test01.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
  </head>
  <body>
     <select id="province" name="province">
       <option value="">请选择....</option>
     </select>
     <select id="city" name="city">
        <option value="">请选择.....</option>
     </select>
  </body> 
    <script language="JavaScript">

            /*
             * jquery通过$.get()或者$.post()方法来解析并加载xml文件
             * 
             *  * 以$.get(url,callback)方法为例
             *      * url：要解析的xml文件的路径
             *      * callback：回调函数，function(xml){}
             *          * xml：解析后的内容
             */
            $.get("cities.xml",function(xml){
                var docXml = xml;

                //在jquery中使用标签名来查找对应标签，利用find()方法，传入标签名
                var $provinceXmlElements = $(docXml).find("province");

                $provinceXmlElements.each(function(index,domEle){
                    var $provinceXmlValue = $(domEle).attr("name");

                    /*
                     * <select id="province" name="province">
                           <option value="">请选择....</option>
                         </select>
                     */
                    var $option = $("<option></option>");
                    $option.attr("value",$provinceXmlValue);
                    $option.text($provinceXmlValue);

                    var $provinceElement = $("#province");
                    $provinceElement.append($option);

                });

                $("#province").change(function(){
                    var $provinceValue = $("#province").val();

                    //清空
                    /*
                     * <select id="city" name="city">
                            <option value="">请选择.....</option>
                            <option value="长春">长春</option>
                         </select>
                     */
//                  $("#city option[value!='']").each(function(index,domEle){
//                      $(domEle).remove();
//                  });

                    $("#city option[value!='']").remove();



                    $provinceXmlElements.each(function(index,domEle){
                        var $provinceXmlValue = $(domEle).attr("name");

                        if($provinceValue==$provinceXmlValue){
                            var $cityXmlELements = $(domEle).find("city");

                            $cityXmlELements.each(function(index,domEle){
                                var $cityXmlValue = $(domEle).text();

                                /*
                                 * <select id="city" name="city">
                                        <option value="">请选择.....</option>
                                     </select>
                                 */
                                var $option = $("<option></option>");
                                $option.attr("value",$cityXmlValue);
                                $option.text($cityXmlValue);

                                var $cityElement = $("#city");
                                $cityElement.append($option);

                            });
                        }
                    });
                });
            });

    </script>
</html>

<?xml version="1.0" encoding="GB2312"?>
<china>
    <province name="吉林省">
        <city>长春</city>
        <city>吉林市</city>
        <city>四平</city>
        <city>松原</city>
        <city>通化</city>
    </province>
    <province name="辽宁省">
        <city>沈阳</city>
        <city>大连</city>
        <city>鞍山</city>
        <city>抚顺</city>
        <city>铁岭</city>
    </province>
    <province name="山东省">
        <city>济南</city>
        <city>青岛</city>
        <city>威海</city>
        <city>烟台</city>
        <city>潍坊</city>
    </province>
</china>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery 加载并解析 XML实现省市联动

JQuery 加载并解析 XMLJQuery 可以通过 $.get() 或 $.post() 方法来加载 xml. JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><htm
复制链接

扫一扫