index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var xmlDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
xmlDoc.async = false;
xmlDoc.load("data.xml");
var cbNode = xmlDoc.selectNodes("/root/catalogb");
function init()
{
for(var i=0;i<cbNode.length;i++) {
var oOption = document.createElement('OPTION');
var catalogb=cbNode[i].getAttribute('text');
oOption.text = " "+catalogb+" ";
oOption.value = catalogb;
form1.catalogb.options.add(oOption);
}
display();
}
function display()
{
var index=form1.catalogb.selectedIndex;
form1.cataloga.length=0;
var selectedCity = cbNode[index];
for(var i=0;i<selectedCity.childNodes.length;i++){
var oOption = document.createElement('OPTION');
var cataloga=selectedCity.childNodes[i].getAttribute('text');
oOption.text = " "+cataloga+" ";
oOption.value = cataloga;
form1.cataloga.options.add(oOption);
}
}
</script>
</head>
<body onload="init()">
<form action="" method="post" id="form1" name="form1">
<select name= "catalogb" id="catalogb" onchange="display();" align="center">
</select>
<br>
<select name= "cataloga" id="cataloga" align="center">
</select>
</form>
</body>
</html>
data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<catalogb id="100" text="古遗址">
<cataloga id="101" text="洞穴址"/>
<cataloga id="102" text="聚落址"/>
<cataloga id="103" text="城址"/>
<cataloga id="104" text="窑址"/>
<cataloga id="105" text="窑藏址"/>
<cataloga id="106" text="矿冶遗址"/>
<cataloga id="107" text="古战场"/>
<cataloga id="108" text="驿站古道遗址"/>
<cataloga id="109" text="军事设施遗址"/>
<cataloga id="110" text="桥梁码头遗址"/>
<cataloga id="111" text="祭祀遗址"/>
<cataloga id="112" text="水下遗址"/>
<cataloga id="113" text="水利设施遗址"/>
<cataloga id="114" text="寺庙遗址"/>
<cataloga id="115" text="宫殿衙署遗址"/>
<cataloga id="116" text="其他古遗址"/>
</catalogb>
<catalogb id="200" text="古墓葬">
<cataloga id="201" text="帝王陵寝"/>
<cataloga id="202" text="名人或贵族墓"/>
<cataloga id="203" text="普通墓葬"/>
<cataloga id="204" text="其他古墓葬"/>
</catalogb>
<catalogb id="300" text="古建筑">
<cataloga id="301" text="城垣城楼"/>
<cataloga id="302" text="宫殿府邸"/>
<cataloga id="303" text="宅第民居"/>
<cataloga id="304" text="坛庙祠堂"/>
<cataloga id="305" text="衙署官邸"/>
<cataloga id="306" text="学堂书院"/>
<cataloga id="307" text="驿站会馆"/>
<cataloga id="308" text="店铺作坊"/>
<cataloga id="309" text="牌坊影壁"/>
<cataloga id="310" text="亭台楼阙"/>
<cataloga id="311" text="寺观塔幢"/>
<cataloga id="312" text="苑囿园林"/>
<cataloga id="313" text="桥涵码头"/>
<cataloga id="314" text="堤坝渠堰"/>
<cataloga id="315" text="池塘井泉"/>
<cataloga id="316" text="其他古建筑"/>
</catalogb>
<catalogb id="400" text="石窟寺及石刻">
<cataloga id="401" text="石窟寺"/>
<cataloga id="402" text="摩崖石刻"/>
<cataloga id="403" text="碑刻"/>
<cataloga id="404" text="石雕"/>
<cataloga id="405" text="岩画"/>
<cataloga id="406" text="其他石刻"/>
</catalogb>
<catalogb id="500" text="近现代重要史迹及代表性建筑">
<cataloga id="501" text="重要历史事件和重要机构旧址"/>
<cataloga id="502" text="重要历史事件及人物活动纪念地"/>
<cataloga id="503" text="名人故、旧居"/>
<cataloga id="504" text="传统民居"/>
<cataloga id="505" text="宗教建筑"/>
<cataloga id="506" text="名人墓"/>
<cataloga id="507" text="烈士墓及纪念设施"/>
<cataloga id="508" text="工业建筑及附属物"/>
<cataloga id="509" text="金融商贸建筑"/>
<cataloga id="510" text="中华老字号"/>
<cataloga id="511" text="水利设施及附属物"/>
<cataloga id="512" text="文化教育建筑及附属物"/>
<cataloga id="513" text="医疗卫生建筑"/>
<cataloga id="514" text="军事建筑及设施"/>
<cataloga id="515" text="交通道路设施"/>
<cataloga id="516" text="典型风格建筑或构筑物"/>
<cataloga id="517" text="其他近现代重要史迹及代表性建筑"/>
</catalogb>
<catalogb id="600" text="其他">
<cataloga id="601" text="其他"/>
</catalogb>
</root>
分享到：
相关推荐
java js 城市级联菜单xml和sql版.rar
该作者独到的思维见解,以及那通俗易懂的代码,非常适合初学者学习,以及对于有基础的朋友一些思维拓展是非常有帮助的!
全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包，Select下拉框已经过美化，比传统的灰色风格Select下拉列表更美观，城市菜单信息存放在XML文件内，若城市信息有所变动，或者想修改成其它的级联菜单，...
使用js+xmldom+xpath实现的三级联动菜单， 以一个国标的行政区划码的xml文件为例子，展示省市县三级联动，菜单的初始值在html的hidden字段设置了山东省-青岛市-平度市。 你可以把他换成你需要xml文件，或者xml字符...
例子2：按需取数据—级联菜单 例子3：读取外部数据 六、AJAX的缺陷 七、AJAX开发 7.1、AJAX应用到的技术 A、XMLHttpRequest对象 B、Javascript C、DOM D、XML 7.2、AJAX开发框架 A、初始化对象并...
虽然也使用了Prototype.js来编写，但是由于对它的不了解，类的实现仍然是使用了《JavaScript高级程序设计》里的方法。使用AJAX进行数据验证时，最初使用的是XML来当数据源，然而在使用了一段时间后，发现XML效率太低...
最近又教js代码把以前的省市级联改的完美了一些 本代码的特点: 1 兼容性好 (IE FF) 2 不使用服务器端技术 3 地区数据与显示逻辑相分离(xml数据) 4 数据标准，齐全(国土资源部数据) 博客地址 ...
NULL 博文链接：https://hzp.iteye.com/blog/1606504
获取全国各区域的邮政编码与区号信息 使用AJAX进行数据传递...前台的JavaScript进行XML的解析，最后将数据进行整理输出。 [\getZipInfo\] 建立数据库xmlinfo,初始化data\目录下的四个数据脚本，共有记录近1万条。
城市数据单独存在xml文件中，执行效率高。 初始化时可自动选择指定城市，示例： //初始化下拉菜单 InitCityList(); //自动选择默认地区 AutoSelect('福建省','龙岩市','新罗区'); </script>
例子2：按需取数据—级联菜单 例子3：读取外部数据 六、AJAX的缺陷 七、AJAX开发 7.1、AJAX应用到的技术 A、XMLHttpRequest对象 B、Javascript C、DOM D、XML 7.2、AJAX开发框架 A、...
级联菜单 <br>例子3 ：读取外部数据 <br>六、AJAX 的缺陷 七、AJAX 开发 7.1 、AJAX 应用到的技术 A 、XMLHttpRequest 对象 <br>B 、Javascript C 、DOM D 、XML 7.2 、AJAX 开发...
实战技巧：级联菜单 实战技巧：条目内容 实战技巧：级联下拉列表 使用responseXML处理返回的XML信息 实战技巧：获取元对象数据 实战技巧：处理列表数据 实战技巧：处理级联的数据 实战技巧：保存更新数据 在普通文本...
例子2：按需取数据—级联菜单... 7 例子3：读取外部数据... 7 六、AJAX的缺陷... 7 七、AJAX开发... 8 7.1、AJAX应用到的技术... 8 A、XMLHttpRequest对象... 8 B、Javascript. 9 C、DOM. 9 ...
实例355 用JavaScript控制XML文档的分页显示 565 实例356 通过操作XML数据岛实现添加、删除留言信息 567 第15章 JavaScript与ASP结合 573 15.1 弹出窗口/对话框控制 574 实例357 关闭弹出窗口时刷新父窗口...
代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD ... <head> <title>.../title>... [removed] function loadXML(){ var xmlDoc; try{ //IE xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”
实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉菜单的值显示不同控件 112 实例069 分级下拉列表 113 2.3 单选按钮组 114 实例070 不提交表单获取单选按钮的值 114 实例071 选中单选...
实例308 通过JavaScript操作XML文档并分页 显示 486 实例309 通过JavaScript控制循环不间断播放 图片 487 实例310 利用javaScript控制Flash播放和停止 488 12.4 应用JavaScript实现Web打印 功能 490 实例311 调用IE...
• 1.3.js 1.3.htm使用的外部JavaScript文件 第2章（\第2章） • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...