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

来源：互联网发布：韩国文化产业知乎编辑：程序博客网时间：2024/06/05 19:26

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 0