js實現省份、城市的級聯選擇
阿新 • • 發佈:2019-01-28
JS實現省份、城市的級聯選擇
實現省份、城市的級聯選擇,可以用純JS實現,當然也可以使用jquery實現,下面就講一下如何用純javascript實現。
其實實現JS這個很簡單,有兩點需要注意:
1、對省份的下拉框的onchange事件進行監聽,一旦省份被改變,那麼就去xml資原始檔裡獲取對應的城市,建立新的option節點,將之掛載在城市節點下。
2、有個地方需要注意,在監聽事件裡,首先需要先刪除除city下第一個子節點外的所有的option節點,這是清除上一次的選擇資訊。
3、在清除上次選擇的城市的時候,需要注意獲得的城市節點陣列的長度是不斷變化的。
程式碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js-9.html</title>
<script type="text/javascript">
window.onload=function(){
var provinceNode=document.getElementById('province');
provinceNode.onchange=function(){
//清除city節點的所有子節點(除第一個節點)
var cityNode=document.getElementById('city' );
var cityNodeOptions=cityNode.getElementsByTagName('option');
var len=cityNodeOptions.length;
for(var i=1;i<len;i++){
//每次都清除第2個,因為陣列cityNodeOptions的長度是動態變化的
cityNode.removeChild(cityNodeOptions[1]);
}
var provinceVal=this.value;
if(provinceVal==null){
return false;
}
//載入city.xml檔案
var xmlDoc=parseXml('cities.xml');
//使用XPATH技術,在xml中查詢匹配的province節點
var provinceEles = xmlDoc.selectNodes("//province[@name='"
+ provinceVal + "']");
var cityNodes=provinceEles[0].getElementsByTagName('city');
//遍歷city,得到每個文字值,建立新的節點並新增
for(var i=0;i<cityNodes.length;i++){
var text=cityNodes[i].firstChild.nodeValue;
var addNodeOption=document.createElement('option');
var addNodeText=document.createTextNode(text);
addNodeOption.appendChild(addNodeText);
//將新節點掛載到city節點下
cityNode.appendChild(addNodeOption);
}
}
}
function parseXml(fileName){
//IE 核心的瀏覽器
if (window.ActiveXObject) {
//建立 DOM 解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
//載入 XML 文件, 獲取 XML 文件物件
doc.load(fileName);
return doc;
}
}
</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province">
<option value="">請選擇...</option>
<option value="河北省">河北省</option>
<option value="遼寧省">遼寧省</option>
<option value="山東省">山東省</option>
</select>
<select id='city'>
<option value="">請選擇...</option>
</select>
</body>
</html>
所使用的資原始檔 cityes.xml如下:
<?xml version="1.0" encoding="GB2312"?>
<china>
<province name="河北省">
<city>石家莊</city>
<city>邯鄲</city>
<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>