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>
分享到：
相关推荐
总结，js和html编写的级联菜单结合了前端和后端的技术，通过JavaScript实现了动态交互和数据获取，HTML提供了结构基础，而数据库则为菜单提供了数据源。这种技术组合使得网页可以提供丰富的交互性和实时性，极大地...
JavaScript是实现异步级联菜单的主要编程语言，负责处理用户交互、DOM（文档对象模型）操作以及AJAX请求的发送和响应处理。在"AjaxMultiMenu.html"页面中，JavaScript代码会监听用户的点击事件，当用户选择一个菜单...
在本主题“级联菜单=javascript+xml”中，我们将深入探讨如何利用JavaScript和XML这两种技术来实现这样的功能。 JavaScript是一种强大的客户端脚本语言，广泛应用于网页动态效果的实现。在级联菜单中，JavaScript...
AJAX（Asynchronous JavaScript and XML）技术可以有效地实现级联菜单的动态加载和交互，无需刷新整个页面即可获取并显示数据。 **AJAX** 是一种在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页的...
标题中的“三级级联菜单（JS+HTML)”指的是在网页设计中使用JavaScript和HTML实现的具有三级结构的下拉菜单。这种菜单允许用户通过点击主菜单项来展开子菜单，进一步点击子菜单项可以展开更深层次的选项，提供了一种...
在本项目中，Ajax被用来实现级联菜单的效果，即一个下拉菜单的选择会影响另一个下拉菜单的内容，这种交互方式常见于数据层级关系丰富的表单中。下面将详细介绍Ajax实现级联菜单的相关知识点。 1. **异步通信**： ...
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这个实例中的“级联菜单”是AJAX应用的一个常见场景，常用于下拉选择框，其中一个选项的选择会动态地影响...
在成功获取XML数据后，可以遍历XML节点，构建新的城市级联菜单，例如： ```javascript var provinces = $(xml).find('province'); provinces.each(function() { var provinceName = $(this).find('name').text(); ...
在提供的"menu"文件中，可能包含JavaScript代码文件（如`menu.js`）和CSS样式文件（如`menu.css`），它们分别实现了级联菜单的逻辑和样式。通过学习这些文件，你可以更深入地理解如何将JavaScript和CSS结合来创建...
在我们的三级级联菜单中，服务器可能会返回一个包含各级菜单项的JSON数组，供前端JavaScript代码处理。 **JSP (JavaServer Pages)** 是Java平台上的动态网页技术，它可以将Java代码嵌入到HTML页面中，使得服务器端...
在IT行业中，构建二级级联菜单是一项常见的任务，特别是在网页设计和开发中。这个主题涉及到JavaScript库jQuery的使用，以及后端技术MySQL和Servlet的配合。让我们深入探讨这些知识点。 首先，**jQuery** 是一个轻...
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在本案例中，我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件，它使得用户能够在下拉菜单中选择...
在JavaScript编程中，级联菜单（Cascading Menu）是一种常见的交互设计元素，常用于网站导航，它允许用户逐级展开或收起下级菜单项。在这个特定的案例中，我们讨论的是用JavaScript动态创建这样的级联菜单。动态创建...
这通常通过AJAX实现，即异步JavaScript和XML，使得用户可以在不重新加载整个页面的情况下获取和更新数据。 数据绑定是实现这种功能的关键。在.NET MVC中，数据绑定可以将模型的数据自动映射到视图中的元素，如...
在级联菜单中，第一个下拉框的选择会决定第二个下拉框的内容，而第二个下拉框的选择可能又会影响到第三个下拉框的选项，以此类推。这种联动的效果需要后端动态生成并返回相应的数据。 要实现Struts2的级联菜单，...
在IT行业中，动态Web应用程序的开发常常涉及到用户界面的交互性，其中级联菜单（Cascading Menu）是一种常见的设计模式，特别是在数据管理和导航中。DWR（Direct Web Remoting）是一个JavaScript库，它允许Java代码...
在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它通常用于下拉选择框，其中每个选项的选择会影响到下一级别的选项。在本案例中，我们讨论的是如何实现一个三级联动的级联菜单，这在数据筛选、...
在Web开发中，树形级联菜单是一种常见的用户界面元素，尤其在数据层次结构复杂的系统中，如组织架构、文件目录或数据库表关系的展示。本项目实现了将这种菜单与Oracle数据库连接，利用Ajax和Servlet技术，实现了动态...
5. **动态更新DOM**：JavaScript接收到服务器返回的数据后，需要将其插入到DOM中，更新级联菜单的显示。这可能涉及到DOM的插入、删除或替换操作，如使用`$.append()`、`.html()`或`.text()`等jQuery方法。 6. **...