jQuery-DOM

时间 2019-11-24

标签 jquery dom 栏目 JQuery 繁體版

原文原文链接

jQuery提供过了方便的方法能够对XML文件进行解析：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>

解析方法：java

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