您的位置：首页 > Web前端 > JQuery

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

2016-11-15 14:12 288 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery xml

相关文章推荐

新的分享

章节导航