<script type="text/javascript">
window.onload = function() {
/**
* 加載xml
*/
function parseXML() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "xml/city.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
return xmlDoc;
};
/**
*獲得select的文本值
*這裏採用這種做法的好處是爲了兼容ie和ff
*/
function getName(obj)
{
var index = obj.selectedIndex; // 選中索引
var text = obj.options[index].text;
return text;
}
/*
*如果城市裏面已經有數據,就清空
*
*/
function initCity(cityLen,citys,citysSubElements)
{
if(cityLen>1)
{
for (var int2 = 1,l=cityLen; int2 < l; int2++)
{
var array_element = citysSubElements[1];
citys.removeChild(array_element);
}
}
}
/**
*添加城市
*/
function addCity(arrayElement,citys)
{
for ( var int2 = 0, k = arrayElement.length; int2 < k; int2++)
{
var array_element = arrayElement[int2];
//構造節點
var cityOption = document.createElement("option");
var txtNode = document
.createTextNode(array_element.firstChild.nodeValue);
cityOption.appendChild(txtNode);
//添加相應的節點
citys.appendChild(cityOption);
}
}
document.getElementById("provice").onchange = function()
{
//解析相應的xml
var doc = parseXML();
//獲得城市列表
var provices = doc.getElementsByTagName("provice");
//獲得要顯示的城市組件
var citys = document.getElementById("city");
var citysSubElements = citys.children;
var cityLen = citysSubElements.length;
// 初始化城市列表
initCity(cityLen,citys,citysSubElements)
for ( var int = 0, j = provices.length; int < j; int++) //遍歷省份列表
{
var array_element = provices[int];
if (array_element.getAttributeNode("name").nodeValue == getName(this)) //查找到所需的省份
{
//此處寫法是爲了兼容ie
var arrayElement = array_element.children||array_element.childNodes;//查找到所需的城市()
addCity(arrayElement,citys);
break;
}
}
}
}
</script>
<select id="provice">
<option>
請選擇
</option>
<option>
遼寧
</option>
<option>
河南
</option>
<option>
廣東
</option>
</select>
<select id="city">
<option>
請選擇
</option>
</select>
<?xml version="1.0" encoding="GBK"?>
<china>
<provice name="遼寧">
<city>瀋陽市</city>
<city>鐵嶺縣</city>
<city>盤錦市</city>
<city>錦州市</city>
</provice>
<provice name="河南">
<city>鄭州</city>
<city>南陽</city>
<city>焦作</city>
<city>新鄉</city>
</provice>
<provice name="廣東">
<city>深圳</city>
<city>珠海</city>
<city>東莞</city>
<city>梅州</city>
</provice>
</china>
select根據省份從xml文件裏面讀取城市信息的例子(兼容ff與ie)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.