1. 程式人生 > >JQuery 載入並解析 XML實現省市聯動

JQuery 載入並解析 XML實現省市聯動

/* * 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); }); } }); }); });