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>

相關標籤/搜索

HTML

JQuery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。