<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>
解析xml文件实现省市级联下拉菜单
</h1>
<div>
<span> <select id="province" name="province"
style="width: 80px;">
</select> </span>
<span> <select id="city" name="city">
<option>
请选择相应省下面的市
</option>
</select> </span>
<span> <select id="area" name="area">
<option>
请选择相应省下面的区
</option>
</select> </span>
</div>
</body>
</html>
<script type="text/javascript">
var sheng = document.getElementById("province");
var shi = document.getElementById("city");
var qu = document.getElementById("area");
window.onload = function() {
shi.style.display = "none";
qu.style.display = "none";
var xmlDom;
var bool_IE = (window.ActiveXObject ? true : false);
if (bool_IE) {
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
} else {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
}
xmlDom.async = false;
xmlDom.load("city.xml");
//获取xml根节点
var root = xmlDom.documentElement;
var provinces = root.getElementsByTagName("province");
for ( var i = 0; i < provinces.length; i++) {
var name = provinces[i].getAttribute("name");
var pccode = provinces[i].getAttribute("postcode");
var province = document.createElement("option");
province.appendChild(document.createTextNode(name));
province.setAttribute("value", pccode);
sheng.appendChild(province);
}
//省的改变事件
sheng.onchange = function() {
shi.style.display = "inline-block";
var hprovinces = sheng.getElementsByTagName("option");
var cities = provinces[sheng.selectedIndex]
.getElementsByTagName("city");
shi.length = 0;
for ( var i = 0; i < cities.length; i++) {
var name = cities[i].getAttribute("name");
var pccode = cities[i].getAttribute("postcode");
var city = document.createElement("option");
city.appendChild(document.createTextNode(name));
city.setAttribute("value", pccode);
shi.appendChild(city);
}
}
//市改变的事件
shi.onchange = function() {
qu.style.display = "inline-block";
var hprovinces = sheng.getElementsByTagName("option");
var hcites = shi.getElementsByTagName("option");
var cities = provinces[sheng.selectedIndex]
.getElementsByTagName("city");
var areas = cities[shi.selectedIndex].getElementsByTagName("area");
qu.length = 0;
for ( var i = 0; i < areas.length; i++) {
var name = areas[i].getAttribute("name");
var pccode = areas[i].getAttribute("postcode");
var area = document.createElement("option");
area.appendChild(document.createTextNode(name));
area.setAttribute("value", pccode);
qu.appendChild(area);
}
}
}
</script>
============================================================================
city-xml文件在附件中
分享到：
相关推荐
JS三级联动菜单---世界主要国家地区
JS三级联动菜单---世界主要国家地区 本篇文章主要介绍了使用JavaScript实现三级联动菜单，涵盖了世界主要国家和地区。下面将对标题、描述、标签和部分内容中的知识点进行详细的解释和说明。 首先， lets talks ...
1. **三级联动**：在Android中，三级联动通常指的是三个层次的数据关联，例如省-市-区，类别-子类别-商品等。用户在选择第一级时，第二级和第三级的数据会相应地动态更新。这种设计使得用户能够快速定位到所需的具体...
这个"全球地址三级联动-省洲-城市-国家-地区-包-master.zip"文件包含了实现这种功能所需的资源和代码，适用于构建一个完整的全球地址选择系统。 首先，我们要理解这个系统的三级联动概念。在地理信息中，通常我们会...
这里的"四级联动"和"三级联动"是一种特殊的用户界面设计概念，常见于数据筛选、下拉菜单或者导航系统中。这种联动机制允许用户在多个选择项间进行交互，选择一个选项时会动态地影响其他相关联的选择项，从而实现更...
在网页设计中，"三级联动菜单"是一种常见的交互方式，特别是在点餐系统、点歌系统等需要层次结构展示数据的应用中。它通过下拉菜单的形式，将多级分类信息进行关联，用户在选择一级菜单后，二级菜单会相应更新，再...
【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景，它主要利用JavaServer Pages（JSP）和Asynchronous JavaScript and XML（AJAX）来实现动态网页中的数据交互和页面更新。在这个例子中，我们看到的是一个...
在网页开发中，"ASP + JS三级联动的省-市-区"是一个常见的功能，用于实现用户选择省份、城市和区域的交互效果。这个功能在注册、地址填写等场景非常实用，可以为用户提供便捷的下拉选择体验。下面将详细解释这一技术...
"省市区三级联动数据表-sql文件（全）"这个资源提供了一个完整的解决方案，用于处理中国境内的省份、城市和区县的地理信息，并且实现了联动效果。 首先，我们要理解什么是“三级联动”。在用户界面设计中，三级联动...
在网页设计中，"三级联动菜单"是一种常见的交互元素，特别是在复杂的网站导航系统中，它能够帮助用户高效地浏览和定位信息。三级联动菜单通常指的是一个包含主菜单、子菜单和孙菜单的多层次下拉菜单结构，用户在选择...
在本项目中，"json实现三级联动下拉框---struts版（数据来自mysql数据库）"是利用JSON来处理省市县三级联动效果的示例，它通过Struts框架与MySQL数据库进行交互，动态地从数据库获取数据并更新到前端页面的下拉框中...
"商品发布三级联动菜单js代码" 是一种实现这一功能的技术解决方案，它常见于商城网站，提升用户体验，增强商品搜索的准确性。这种技术主要依赖JavaScript（JS）语言，通过前端代码实现页面元素的动态交互。 一、...
在“ElementUI三级联动菜单代码”中，我们主要关注的是一个特定的功能实现，即省市区三级联动菜单。这个功能在很多web应用中都非常常见，特别是在涉及到地址选择或者地理位置相关操作时。 首先，我们要理解什么是三...
在Android开发中，构建一个三级联动菜单是一项常见的需求，它能够为用户提供更加便捷的操作体验，尤其是在数据层级结构较深的应用中。本示例主要讲解如何使用Android原生组件和一些设计模式来实现这样的功能。 首先...