您的位置:首页 > Web前端 > JavaScript

html中使用js加载xml文件

2014-07-29 20:56 369 查看
<script type='text/javascript'>
function parseXML(file){
try //Internet Explorer---ie浏览器的解析器创建方式如下:
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try //Firefox, Mozilla, Opera, etc. 火狐等浏览器的创建方式。
{
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
alert(e.message);
return;   //如果创建不成功,就直接返回,不往下走。
}
}
xmlDoc.async = false;
xmlDoc.load(file);
return xmlDoc;   //返回创建好的解析器,传给调用者。
}
//以上部分是百度找的。。
var xml;	//xml解析器
var doc;	//解析后的document
var city;	//节点信息
function loadXML(file){
//加载文件
xml = parseXML(file);
doc = xml.documentElement;

var select = document.getElementById("list");
//遍历xml元素 并加入select
city = doc.getElementsByTagName("City");
for(var i = 0; i<city.length ;i++){
var opt = document.createElement("option");
opt.value = i;		//此处value设为对应下标
opt.innerText = city[i].getAttribute("Name");
select.appendChild(opt);
}
}

function showMSG(list){

var cityMsg = document.getElementById("cityMsg");
//获取对应下标
var num = list.value;
//当select框不是“请选择”时,显示城市信息
if(!isNaN(num)){
//显示当前选中城市的信息
cityMsg.innerText = city[num].text;
}
//否则置为空
else{
cityMsg.innerText = "";
}

}

</script>
<BODY>
<input type="button" value="加载xml文件" onclick="loadXML('city.xml')"><br>
城市列表:
<select id="list" name="list" onchange="showMSG(this)">
<option>请选择</option>
</select>
<br>
城市信息:
<textarea id="cityMsg" style="width:200px;height:120px;">

</textarea>
</BODY>
</HTML>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js xml