这是我的一篇关于js解析xml练习的一篇文章：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<select name="country" id="country">
<option value="">-- 请选择国家 --</option>
</select>
<select name="province" id="province">
<option value="">-- 请选择省市 --</option>
</select>
<select name="city" id="city">
<option value="">-- 请选择城市 --</option>
</select>
<select name="region" id="region" style="display:none">
<option value="">-- 请选择县 --</option>
</select>
<script type="text/javascript">
var xmlDom;
if(window.ActiveXObject){
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}else{
xmlDom = document.implementation.createDocument("","",null);
}
//alert(xmlDom);//---加载本地xml文件---并解析
xmlDom.async = false;
xmlDom.load("LocList.xml");
var countrys = xmlDom.getElementsByTagName("CountryRegion");
//第一级级联
for(var i = 0;i < countrys.length;i++){
var country = countrys[i].getAttribute("Name");
var option = new Option(country,country);
document.getElementById("country").options.add(option);
//alert(country);
}
//第二级级联
document.getElementById("country").onblur = function(){
var v = this.value; //国家
//alert(v + "^^^" + country);
for(var k = 0; k < countrys.length;k++){
var countryName = countrys[k].getAttribute("Name");
var country = countrys[k];
if(countryName == v){
var provinces = country.getElementsByTagName("State");
//alert(provinces.length);
document.getElementById("province").options.length = 1; //选择前清空
for(var j = 0;j < provinces.length;j++){
var province = provinces[j].getAttribute("Name");
var option = new Option(province,province);
document.getElementById("province").options.add(option);
}
}
}
//document.getElementById("city").options.length = 1
}
//第三级级联----省变动的时候出现三级级联
document.getElementById("province").onchange = function(){
for(var m = 0; m < countrys.length;m++){
var v2 = this.value;
var provinces = countrys[m].getElementsByTagName("State");
//alert(v2 + "&&&" + this.value);
//外国的州一般为空---暂时不可用
//中国的省市处理
for(var n = 0;n < provinces.length;n++){
var provinceName = provinces[n].getAttribute("Name");
//alert(v1 + "**" + provinceName);
var province = provinces[n];
if(provinceName == v2){
var citys = province.getElementsByTagName("City");
document.getElementById("city").options.length = 1; //选择前清空
for(var k = 0;k < citys.length;k++){
var city = citys[k].getAttribute("Name");
var option = new Option(city,city);
document.getElementById("city").options.add(option);
}
}else if(v2 == ""){
alert("aa");
}
}
}
}
document.getElementById("city").onchange = function(){
document.getElementById("region").style.display = "block";
}
</script>
</body>
</html>
分享到：
相关推荐
省级三级联动下拉选项 www.hunlun.com
本资源"基于JavaScript的省级联动.rar"提供了一个实现这一功能的js文件——area.js，非常适合开发者直接引用到自己的项目中。 JavaScript，简称JS，是Web开发中的主要脚本语言，常用于客户端的交互逻辑处理。在这个...
下面将详细解释如何使用JS实现省级联动菜单及其相关知识点。 一、HTML结构 首先，我们需要创建基本的HTML结构，包含省份、城市和区县的select元素。每个select元素都有一个id，以便于JavaScript操作： ```html ...
完美的js省级联动效果
在这个项目中，我们关注的是Echarts的地图功能，特别是省级联动和动态加载数据的实现，同时还有右键菜单功能的添加。 一、Echarts地图省级联动 省级联动是指在Echarts地图中，当用户点击或选择一个省份时，地图会...
综上所述，"实例省级联动 精简版" 是一个实现地区选择功能的前端实践，它涉及到了前端开发中的多个重要知识点，包括HTML布局、JavaScript事件处理、Ajax通信、DOM操作以及用户体验设计等。通过学习和应用这个实例，...
在这个“Javascript:通用不间断滚动&省、市、地区联动选择JS封装类”中，我们可以深入探讨两个核心功能：不间断滚动（通常称为无限滚动）和级联选择器（用于省、市、地区等多级联动选择）。 首先，无限滚动是网页...
综上所述，"很super的省级联动菜单全球的"可能是一个利用HTML、JavaScript、AJAX、JSON和可能的前端框架构建的高效、动态且具有全球化特性的交互式菜单系统。开发这样的系统需要考虑用户体验、数据处理、性能优化和...
**jQuery AJAX 省级联动**是一个常见的前端交互技术，主要应用于网页上的下拉菜单选择，例如省份和城市之间的关联选择。在这个实例中，我们利用jQuery的AJAX功能实现动态加载，当用户在省份列表中选择一个省份时，...
总结来说，实现世界主要国家地区的JS三级联动及下拉框的隐藏显示功能，需要对JavaScript的DOM操作、事件监听以及CSS样式有深入理解。通过合理组织数据和动态更新DOM，可以构建出高效、灵活的用户界面。在实际项目中...
【高级省级联动】是一种在网页或应用程序中实现的交互功能，它允许用户在选择省份后自动筛选出对应省份的城市，提供了便捷的多级选择体验。这个功能通常用于地址输入、定位服务或者数据筛选等场景，尤其在电子商务、...
JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和互联网应用开发。在前端开发中，实现省份城市联动是一项常见的需求，它可以让用户在选择省份时，自动更新下拉框中的城市选项，提供更加友好的...
在IT行业中，网页开发是一项核心技能，而"省级联动+弹窗+首页布局"是网页交互设计中的常见需求。这个项目结合了HTML、CSS、jQuery和DIV技术，旨在实现一个功能丰富的网页界面。 首先，省级联动是网页表单中常见的一...
在JavaScript编程中，"省市县三级联动"是一个常见的功能需求，尤其在开发涉及地理信息的Web应用时。这种联动效果通常用于地址选择，用户在选择省份后，市、县（区）的下拉框会自动更新，显示与所选省份对应的选项。...
在IT行业中，网页交互的用户体验至关重要，而"省级联动无刷新效果"正是提升这一体验的一种技术手段。这种效果使得用户在选择省份时，无需等待页面整体刷新，即可动态更新关联的市、县（区）列表，极大地提高了操作的...
在网页开发中，"省级联动"通常指的是当用户选择一个省份时，下拉菜单会自动更新展示该省下属的城市，这种交互方式提高了用户体验并减少了错误输入。本项目使用了EXT JavaScript库和PHP后端来实现这一功能。EXT是一个...
本话题主要关注如何使用AJAX实现一个省级到市级的联动效果，这在很多需要动态选择地区信息的场景中非常常见，如地址填写、物流查询等。下面我们将详细探讨这一技术及其在Java Web环境中的应用。 首先，我们需要了解...
在JavaScript中实现省级联动的效果，通常涉及到数据结构的优化以及事件监听等技术。在这个例子中，数据结构是一个数组，每个元素代表一个省，包含了省名（p_name）、省ID（p_id）以及一个子数组（citys），子数组内...