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 ...
随机推荐
- ubuntu 下 Nginx相关设置
ubuntu安装Nginx之后的文件结构大致为: 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/etc/nginx/sites-available下 启动程序文件在/usr/ ...
- [LintCode] 尾部的零
class Solution { public: // param n : description of n // return: description of return long long tr ...
- pip与apt-get
在ubuntu服务器下安装包的时候,经常会用到sudo apt-get install 包名 或 sudo pip install 包名,那么两者有什么区别呢? 1.区别 pip用来安装来自PyPI( ...
- 利用python实现TCP和UDP服务器
利用python的socket模块可以实现基本的网络编程,并且只限于一对一的连接.当然,也可以在其基础上实现一个网络服务器,但由于太底层这种做法不被推荐.其实如果要实现一个网络服务器很简单,调用pyt ...
- 一篇搞定Vuex
1.简介 首先,你必须明显明白vuex到底是干啥的,主要解决开发中的哪些问题? Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证 ...
- linux c编程:记录锁
记录锁相当于线程同步中读写锁的一种扩展类型,可以用来对有亲缘或无亲缘关系的进程进行文件读与写的同步,通过fcntl函数来执行上锁操作.尽管读写锁也可以通过在共享内存区来进行进程的同步,但是fcntl记 ...
- Python(常用模块)
模块 模块 本质上就是一个.py文件 内置模块(解释器层面) 第三方模块(Python lib文件) 自定义模块(当前路径) 模块调用,包的概念 在计算机程序的开发过程中,随着程序代码越写越多,在一个 ...
- Django框架之模板基础,静态文件配置
一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- replace限制文本框只能输入数字,数字和字母等的正则表达式
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...