ajax学习笔记5
来源:互联网 发布:淘宝刷钻价格表 编辑:程序博客网 时间:2024/06/18 11:44
写一个js对xml的解析,做一个select的2级联动,很用的,以后只要改xml文件就行了
<!DOCTYPEhtml PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
<scripttype="text/javascript">
window.onload = function() {
var xmlDoc =new ActiveXObject("Microsoft.XMLDOM");//创建微软的解析器
var provinceElement = document.getElementById("province");
var cityElement = document.getElementById("city");//获取省和城市的下俩列表元素节点
xmlDoc.async = "false";//设置异步关闭
xmlDoc.load("fish.xml");//加载xml
var txt = xmlDoc.getElementsByTagName("province");//获取xml标签名字
for (var i = 0; i < txt.length; i++) {//可以获取xml里面属性
var name = txt[i].getAttribute("name");
var p = document.createElement("option");//创建option元素节点
p.appendChild(document.createTextNode(name));//创建文本节点
province.appendChild(p);//挂载节点到第一个下拉表中
}
provinceElement.onchange = function() {
var selectprovinceElement =provinceElement[provinceElement.selectedIndex];
//alert(selectprovinceElement.value);
var selectValue = selectprovinceElement.value;//获取选中元素的值
cityElement.length=1;//这句话很重要。为了下次点击的时候,将上次的select里面的option清除
for (var i = 0; i < txt.length; i++) {
var name = txt[i].getAttribute("name");//再一次或得xml的省份
if (name == selectValue) {//如果相等就读取省下的子节点
var city = txt[i].childNodes;//获取该节点的孩子节点
for (var j = 0; j < city.length; j++) {
var optionElement = document.createElement("option");
//city[j].childNodes[0].nodeValue;//获取xml省下的所有子节点
var optionTextElement = document
.createTextNode(city[j].childNodes[0].nodeValue);//创建一个文本节点
optionElement.appendChild(optionTextElement);
cityElement.appendChild(optionElement);//跟第一次样
}
}
}
}
}
</script>
</head>
<body>
<selectid="province">
<option>--请选择省--</option>
</select>
<selectid="city">
<option>--请选择市--</option>
</select>
</body>
</html>
Xml文件 fish.Xml
<?xmlversion="1.0" encoding="UTF-8"?>
<cities>
<province name="浙江省">
<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>
</cities>
- ajax学习笔记5
- ajax学习笔记---什么是Ajax
- [ajax 学习笔记] ajax初试
- Ajax学习笔记-Ajax数据格式
- AJAX学习笔记--慕课网Ajax
- Ajax学习笔记(一)
- Ajax学习笔记(二)
- Ajax学习笔记(三)
- Ajax学习笔记(四)
- Ajax学习笔记(五)
- Ajax学习笔记(六)
- Ajax学习笔记
- Ajax 学习笔记(1)
- Ajax 学习笔记(2)
- Ajax 学习笔记(3)
- Ajax Gossip学习笔记
- AJAX学习笔记--从零开始
- Ajax 学习笔记
- GDB调试命令layout
- VM虚拟机下如何加载U盘
- OOAD-004
- VCS and DVE user guide
- crontab使用
- ajax学习笔记5
- 【iOS/Mac OS】程序崩在objc_msgSend(),怎么办?
- 网卡移植报错
- Java虚拟机类装载:原理、实现与应用
- 第一个arcgis server for flex例子
- Mac OS中SVN工具Versions日期重置脚本
- 【Linux操作系统分析】设备驱动处理流程
- OOAD-005
- C++迭代器