JQuery 載入並解析 XML實現省市聯動
阿新 • • 發佈:2019-01-30
/*
* 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);
});
}
});
});
});