Javascript -- 级联菜单, javascript解析xml文件
1.
cities.xml 保存省份和城市
<?xml version="1.0" encoding="GB2312"?>
<china>
<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>
<province name="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>
city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
window.onload=function(){
var provinceElement = document.getElementById("province");
var cityElement = document.getElementById("city");
var xmlDom = parseXML("cities.xml");
var xmlProvinceElements = xmlDom.getElementsByTagName("province");
for(var i=0;i<xmlProvinceElements.length;i++){
var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
var textElement = document.createTextNode(xmlProvinceName);
var optionElement = document.createElement("option");
optionElement.appendChild(textElement);
optionElement.setAttribute("value",xmlProvinceName);
provinceElement.appendChild(optionElement);
} provinceElement.onchange = function(){
var optionElements = cityElement.getElementsByTagName("option");
for(var i=optionElements.length-1;i>0;i--){
cityElement.removeChild(optionElements[i]);
}
var changename = this.value;
for(var i=0;i<xmlProvinceElements.length;i++){
var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
if(changename==xmlProvinceName){
var xmlCitiesElements = xmlProvinceElements[i].getElementsByTagName("city");
for(var j=0;j<xmlCitiesElements.length;j++){
var xmlCityName = xmlCitiesElements[j].firstChild.nodeValue;
var textElement = document.createTextNode(xmlCityName);
var optionElement = document.createElement("option");
optionElement.appendChild(textElement);
optionElement.setAttribute("value",xmlCityName);
cityElement.appendChild(optionElement);
}
}
}
} } ///////////////////////////////////////////////////////////////////////////////////////////////
function parseXML(filename){
var xmlDoc;
try { //Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try { //Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (e) {
}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行。
xmlDoc.async=false;
//解析器加载名为 "xxx.xml" 的 XML 文档
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</html>
Javascript -- 级联菜单, javascript解析xml文件的更多相关文章
- XML:使用DOM技术解析xML文件中的城市,实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...
- JS解析XML文件和XML字符串
JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...
- Php 解析XML文件
Php 解析XML文件 Php 解析XML文件,仅供学习參考!演示样例代码例如以下: <?php header("Content-type: text/html; charset=ut ...
- Ajax实现xml文件数据插入数据库(一)--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
- 深入浅出如何解析xml文件---下篇
在上篇博文中,小编主要介绍xml的两种解析方式,分别是dom4j和dom,今天这篇博文,小编主要来简单介绍一下xml的其她两种解析方式sax和jdom. sax解析xml文件 sax,全称是Simp ...
- jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
- Android程序解析XML文件的方法及使用PULL解析XML案例
一.一般解析XML文件的方法有SAX和DOM.PULL (1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信 ...
- Android 解析XML文件和生成XML文件
解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...
随机推荐
- Centos6.5下Samba服务器的安装和配置
1.安装samba服务 # yum install samba samba-client samba-swat 2.安装包说明 samba-3.6.23-43.el6_9.x86_64----> ...
- Kafka — 高吞吐量的分布式发布订阅消息系统【转】
1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有哪两个条件 ...
- Linux基础命令(二)
作业一:1) 新建用户natasha,uid为1000,gid为555,备注信息为“master” groupadd -g 555 netasha useradd -u 1000 -g netasha ...
- 8.Query Documents-官方文档摘录
总结 1 先插入数据 db.inventory.insertMany([ { item: "journal", qty: 25, size: { h: 14, w: 21, uom ...
- Redis资料汇总(转)
原文:Redis资料汇总专题 很多朋友反映,说NoSQLFan上的资料不少,但是要找到自己实用的太难,于是萌生做这样一个专题的想法.通过将不同NoSQL产品从入门到精通的各种资料进行汇总,希望能够让大 ...
- 《深入理解Linux网络技术内幕》阅读笔记 --- 路由基本概念
一.路由的基本概念 1.一条路由就是一组参数,这些参数存储了往一个给定目的地转发流量所需的信息,而一条路由所需的最少的参数集合为:(1)目的网络,(2)出口设备,(3)下一跳网关 2.路由中的相关术语 ...
- Keras之函数式(Functional)模型
函数式(Functional)模型 我们起初将Functional一词译作泛型,想要表达该类模型能够表达任意张量映射的含义,但表达的不是很精确,在Keras2里我们将这个词改移为“函数式”,函数式模型 ...
- const,var,let区别(转载)
1.const定义的变量不可以修改,而且必须初始化. const b = 2;//正确 // const b;//错误,必须初始化 console.log('函数外const定义b:' + b);// ...
- pandas(四)唯一值、值计数以及成员资格
针对Series对象,从中抽取信息 unique可以得到Series对象的唯一值数组 >>> obj = Series(['c','a','d','a','a','b','b','c ...
- Runtime.getRuntime().exec()需要注意的地方
文章出处http://www.cnblogs.com/fclbky/p/6112180.html 有时候我们可能需要调用系统外部的某个程序,此时就可以用Runtime.getRuntime().exe ...