<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!-- 引入CSS文件和JS文件 开始 -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- 引入CSS文件和JS文件 结束 -->
<script type="text/javascript">
var provience=[{
name:"山东",
pass:"shandong"
},{
name:"河南",
pass:"henan"
}];
var city=[{
pro:"shandong",
citys:[{
name:"济宁",
value:"jining"
},{
name:"济南",
value:"jinan"
}]
},{
pro:"henan",
citys:[{
name:"洛阳",
value:"luoyang"
},{
name:"新乡",
value:"xinxiang"
}]
}];
function load(){
var len=provience.length;
var sels=document.getElementById("provience");
for(var i=0;i<len;i++){
sels.options.add(new Option(provience[i].name,provience[i].pass));
}
}
function funch(){
var len=city.length;
var sels=document.getElementById("city");
sels.options.length=0;
var provalue=document.getElementById("provience").value;
for(var i=0;i<len;i++){
if(city[i].pro==provalue){
var citys=city[i].citys;
for(var j=0;j<citys.length;j++)
sels.options.add(new Option(citys[j].name,citys[j].value));
}
}
}
</script>
</head>
<body onload="load();">
请选择省份:<select id="provience" onchange="funch();" style="width:100">
<option value="-1">==请选择==</option>
</select>
<br/>
请选择城市:<select id="city" style="width:100">
<option value="-1">==请选择==</option>
</select>
</body>
</html>
分享到：
相关推荐
在级联菜单的场景中，通常会在父级菜单项的`change`事件上做文章，以便在选择时触发子级菜单的更新。例如： ```javascript $("#parentSelect").on("change", function() { var selectedValue = $(this).val(); //...
"4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例。这个项目主要展示了如何在现代浏览器（如Chrome、Firefox、Opera以及IE11）中创建一个可扩展且功能丰富的四级菜单...
在"ajax_struts_jquery_json级联菜单"的场景中，我们将看到如何利用这四种技术协同工作来创建这样的功能。 首先，Struts框架在后台处理业务逻辑。当用户在前端选择了一个父级菜单项后，Struts Action会接收到这个...
级联菜单（Cascading Menu）是Web开发中常见的交互元素，主要用于呈现具有层次结构的数据。在本案例中，我们讨论的是使用JavaScript和HTML技术实现的级联菜单，且该菜单能够与数据库进行交互，动态地从数据库中读取...
在IT领域，异步级联菜单是一种常见的交互设计，它常用于网站或应用程序的导航，尤其是在数据层次结构复杂的情况下。这种菜单系统允许用户逐步选择，每一级的选择会影响到下一级的选项，形成一种“级联”效果。在这个...
使用jquery和json制作省市级联下拉菜单，是同学们学习jquery的绝好范例，要知道，使用jquery从后台往前台传递包含对象的list集合通常是要解析为json对象，这是个很好的例子，希望对同学们有所帮助。该范例包含json...
在网页设计中，级联菜单（Cascading Menu）是一种常见的交互元素，它允许用户通过层级结构来选择或浏览选项。这种菜单常用于导航栏、下拉选择框等，能够节省页面空间并提供良好的用户体验。AJAX（Asynchronous ...
在级联菜单的场景中，服务器可能需要返回一个JSON对象，包含下级菜单的选项信息。 5. **事件处理**： XMLHttpRequest对象有多个与状态相关的事件，如`onreadystatechange`和`onload`。当服务器响应时，会触发这些...
这个实例中的“级联菜单”是AJAX应用的一个常见场景，常用于下拉选择框，其中一个选项的选择会动态地影响另一个选项的显示内容。 在AJAX级联菜单中，用户通常会选择一个主类别，然后基于这个选择，相关的子类别会...
在我们的三级级联菜单中，服务器可能会返回一个包含各级菜单项的JSON数组，供前端JavaScript代码处理。 **JSP (JavaServer Pages)** 是Java平台上的动态网页技术，它可以将Java代码嵌入到HTML页面中，使得服务器端...
JavaScript级联菜单是一种常见的网页交互元素，用于呈现层次结构的数据，如导航菜单、下拉选项等。这种菜单在用户界面上提供了高效的导航，允许用户通过展开和折叠子菜单来探索多级内容。在这个主题中，我们将深入...
5. **数据存储与管理**：城市级联菜单的数据可能存储在JSON文件或数据库中，需要在JavaScript中进行管理。数据通常包含城市名、ID、父级ID等信息，以便于构建和维护菜单的层级关系。 6. **前端框架和库**：现代网页...
在本主题中，“ajax与json实现城市动态级联”指的是利用AJAX和JSON来创建一个动态的、联动的城市选择菜单，这种功能常见于地址输入或者地理位置相关的应用中。 首先，我们来理解AJAX的工作原理。AJAX通过...
"json城市三级级联"是指利用JSON数据来实现省、市、县（区）的三级联动效果。在网页中，用户选择一个省份时，下拉菜单会自动更新为该省下的所有城市，接着选择城市后，再次更新显示该城市下的所有县或区。这种功能在...
在本案例中，我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件，它使得用户能够在下拉菜单中选择省份、城市以及区县，以实现快速筛选或输入数据的目的。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
在Web开发中，树形级联菜单是一种常见的用户界面元素，尤其在数据层次结构复杂的系统中，如组织架构、文件目录或数据库表关系的展示。本项目实现了将这种菜单与Oracle数据库连接，利用Ajax和Servlet技术，实现了动态...
在Struts2中实现级联菜单是一项常见的需求，通常用于构建复杂的下拉选择框，使得用户能够逐级选择相关选项。级联菜单在数据表关联或者层级结构的展示中非常实用，例如地区选择、部门分类等。 首先，我们需要理解...
根据文件信息，下面详细说明了Ajax与Json实现级联菜单的关键知识点： 1. **Ajax技术介绍** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页...
在Web开发中，Ajax被广泛用于实现动态交互效果，比如级联菜单就是一种常见的应用场景。级联菜单允许用户逐级选择，通常在下拉框中展示，每次选择一个类别后，下一个级别的选项会根据上一级的选择动态加载。 级联...