您的位置:首页 > 其它

select根据省份从xml文件里面读取城市信息的例子(兼容ff与ie)

2013-09-13 18:07 405 查看
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: