`
zpx138332
  • 浏览: 46111 次
  • 性别: Icon_minigender_1
  • 来自: 河北
社区版块
存档分类

Javascript+xml实现二级省市级联

阅读更多

HTML中的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testcity.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">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.onload = function() {
var xmlDao
try {
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDao = new ActiveXObject("Microsoft.XMLDOM");
} catch (err) {

try {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
} catch (e) {

}
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDao.async = "false";

//加载city.xml文档
xmlDao.load("city.xml");

//获取xml文档中的跟节点
var root = xmlDao.documentElement;

//获取xml文档中根节点的所有子节点
var sheng = root.childNodes;

//获取Htlm中province标签对象
var province = document.getElementById("province");

for ( var i = 0; i < sheng.length; i++) {
//获取xml文档中的省节点的name值
var name = sheng[i].getAttribute("name");

//创建标签option
var op = document.createElement("option");

//创建一个文本节点,文本节点的值为xml文档中的省节点的name值并将文本节点添加到option节点中
op.appendChild(document.createTextNode(name));

//将option节点添加到province节点中
province.appendChild(op);
}

//获取Htlm中标签ID为cities的对象
var city = document.getElementById("cities");

//为省创建事件
province.onclick = function() {

//获取Htlm中标签ID为province的对象
var province = document.getElementById("province");

//获取province中所有option标签对象
var pro = province.options;
//获取所选中的标签对象
var opre = pro[province.selectedIndex];

//获取其中文本的值
var name = opre.innerHTML;

for ( var i = 0; i < sheng.length; i++) {

//获取省节点中所有的子节点
var name1 = sheng[i].getAttribute("name");
//判断选中的值跟省节点中某一个子节点是否相等
if (name1 == name) {

//每次改变的时候清空
city.length = 1;

//获取xml文档中某一个省节点中所有的子节点
var cit = sheng[i].childNodes;

for ( var i = 0; i < cit.length; i++) {
//创建标签option
var pt = document.createElement("option");

//创建一个文本节点,文本节点的值为xml文档中的省节点中某一个子节点的第一个子节点的name值并将文本节点添加到option节点中
pt.appendChild(document
.createTextNode(cit[i].firstChild.nodeValue));

//将option节点添加到city节点中
city.appendChild(pt);

}

}

}

}
}
</script>

</head>

<body>

<h1>
解析xml文件实现省市级联下拉菜单
</h1>

<div>

<span> <select id="province" name="province">
<option>
请选择省
</option>
</select> </span>

<span> <select id="cities" name="city">
<option>
请选择相应省下面的市
</option>
</select> </span>

</div>
</body>
</html>

简单的XML文档:

<?xml version="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>
<city>承德</city>
</province>
<province name="河南">
<city>郑州</city>
<city>安阳</city>
<city>平顶山</city>
<city>开封</city>
<city>商丘</city>
<city>洛阳</city>
</province>

</cities>
分享到:
评论
1 楼 yinghuayu1324117 2011-03-21  

相关推荐

    修正多个Bug优美的jquery+xml城市3级联动效果(放在IIS下)

    三级联动的效果意味着用户首先选择省份,然后在二级下拉菜单中看到与所选省份对应的城市,最后在三级菜单中选择具体的区县。这种设计减少了用户输入,提高了数据准确性,同时减轻了服务器负担。 项目的描述中提到,...

    SSH+Ajax+JSON省市级联效果Spring+Struts+Hibernate+Jquery

    SSH+Ajax+JSON在Web开发中的应用主要集中在构建动态、响应迅速的用户界面,这里我们主要探讨Spring、Struts、Hibernate这三大框架如何与Ajax和JSON技术结合,以实现省市级联选择的效果。 首先,Spring是Java企业级...

    jquery实现省市级联

    ### 使用jQuery实现省市级联选择器 #### 一、引言 在许多应用程序中,我们需要让用户根据省份选择相应的城市,这种需求通常通过级联选择器来实现。传统的做法是使用纯JavaScript结合HTML来完成,但这种方法较为繁琐...

    省市级联选择的JS特效代码

    "省市级联选择的JS特效代码"就是这样一个实现,它允许用户逐级选择省份、城市,形成一个完整的地区路径,具有良好的用户体验。这个项目特别强调了对不同浏览器的兼容性,这意味着它可能采用了有效的跨浏览器解决方案...

    JS+XML省市区三级级联控件,可随意默认选中

    JS+XML省市区三级级联控件,可任意选中,调用简单,调用如下: 选中区级 前面默认选中 initCity('province','city','district','dist: '+487);...二级级联 initCity('province4','city4','','city: '+129);

    Asp.net+Js实现的全国最新省市区级联

    标题"Asp.net+Js实现的全国最新省市区级联"表明这是一个使用ASP.NET技术和JavaScript(Js)开发的项目,其主要功能是实现一个动态的、实时更新的省级、市级和区县级的选择联动效果。这种级联选择通常用于地理信息...

    省市区级三级联动Jquery_xml版本

    在三级联动中,当用户在第一级(省)选择一个选项时,第二级(市)的下拉列表会自动更新,显示与选定省份相关的城市。同样,当用户在第二级选择后,第三级(区/县)的列表也会随之更新。这种联动效果提升了用户体验...

    JS_XML省市县三级联动

    当用户在一级菜单(省)中选择一个选项时,二级菜单(市)会根据所选省份动态加载对应的城市数据,同理,当市被选定后,三级菜单(县)则会更新为相应的县或区。 首先,我们需要了解JavaScript的基本概念。...

    AJAX省级二级连动例子

    总结,这个"AJAX省级二级连动例子"是一个典型的前端与后端交互的应用场景,它展示了如何通过AJAX、JavaScript、XML以及JAVA技术实现动态下拉框的联动效果,为用户提供流畅的交互体验。理解并掌握这些技术,对于提升...

    省市三级联动(XML)

    在前端实现省市三级联动时,通常会使用JavaScript或jQuery来处理XML数据。首先,通过Ajax请求获取XML文件,然后解析XML内容,将每个省份的ID和名称添加到第一个下拉框(province select),用户选择省份后,根据选定...

    xml城市下拉框联动

    在前端部分,我们可以使用JavaScript或者jQuery等库来处理XML数据并实现联动效果。以下是一个基本的步骤: 1. **加载XML数据**:使用`XMLHttpRequest`或`fetch` API获取XML文件内容,并使用DOM方法解析XML。 2. **...

    Ajax实现二级联动效果

    在网页开发中,二级联动效果通常用于实现如省市区选择、类别分类等场景,它能够为用户提供更加直观和便捷的交互体验。本示例主要关注如何利用AjaxPro.dll组件来实现这种效果。AjaxPro是一个ASP.NET下的AJAX库,它...

    javascript dropdownlist 三级联动的资料

    在网页开发中,JavaScript下拉菜单的三级联动是一种常见的交互设计,主要用于实现多级关联的选择效果,例如在省、市、区的选择中。这个技术基于JavaScript的DOM操作和事件监听,能够动态更新下拉列表,根据用户在前...

    javascript客户端验证和页面特效制作

    ##### 二、实现简单的省市级联的效果 具体实现方式是先定义一个包含省份和城市数据的二维数组,然后根据用户的选择动态填充相应的城市列表。 ##### 三、二维数组 二维数组是一种数据结构,可以用来存储多维数据,...

    js和ajax实现三级联动.zip

    例如,在这里,一级是省份,二级是城市,三级是区县。当用户在一个级别选择一个选项时,其他级别会根据这个选择自动更新其可选选项。这种联动效果提高了数据输入的效率,也使得页面更加直观。 JS是Web开发中的...

    省市区三级联动jquery实现代码

    省市区三级联动功能是前端开发中常见的一种需求,它主要是利用下拉选择框来实现用户选择省、市、区的操作。这种联动的实现方式能够很好地帮助用户在填写表单时快速定位到自己所处的区域,提高了用户体验。在实现这种...

    DWR实现三级联动.pdf

    ### DWR实现省市县三级联动的关键技术点 #### 一、DWR简介及应用场景 - **DWR**(Direct Web Remoting)是一种简化Ajax应用程序开发的框架,它使得客户端JavaScript可以直接调用服务器端的Java方法变得简单易行。在...

    ajax,struts2,json实现省市区三级联动源码含全国省市区数据库

    当用户选择一级数据(如省份)时,系统自动加载并显示二级数据(如城市),接着选择二级数据后,加载三级数据(如区县)。 5. **数据库设计**:项目包含了全国省市区的数据库,这可能是一个包含省级、市级和区县级...

    城市的级联

    描述中提到“省市级联有全部的省和市”,这意味着这个压缩包文件包含了中国所有省份和下属城市的完整数据,这些数据可能是以某种格式(如JSON、CSV或XML)存储,以便于开发者进行二次开发。这种数据结构在各种Web...

    Ajax三级联动无刷新(附数据库)

    Ajax(Asynchronous JavaScript and XML)技术的出现,为实现页面的无刷新更新提供了可能。Ajax允许我们在不重新加载整个网页的情况下,与服务器交换数据并局部更新页面。本篇文章将深入探讨如何在VS2010环境下,...

Global site tag (gtag.js) - Google Analytics