级联下拉菜单就是从一个下拉菜单中选中一项后，相应的另一个下拉菜单的内容会随之改变。
代码一：使用函数createProvince（）加载第一列表框中的值，onchange属性加载相应的第二个列表框中的值
<html>
<head>
<title> new document </title>
<script language="javascript">
function createProvince(){
var provinces = ['--请选择省份--','北京市', '福建省', '湖北省']; //所有省份的数组
var province=document.myform.province; //获取文档中省份这个列表框元素对象
for(var i = 0; i < provinces.length; i++){
province.options.add(new Option(provinces[i], provinces[i])); //往省份的选项组中添加选项
}
}
function createcity(){
var citylist = new Array();
citylist['--请选择省份--'] = ['--请选择城市--'];
citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔'];
citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市'];
citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰'];
//获得选中的省份值
var selectedProv=document.myform.province.value;
var cityOption;
//清空城市列表框中原来的所有选项
document.myform.city.options.length=0;
//添加对应省份的所有城市
for (var city = 0; city < citylist[selectedProv].length; city++) {
cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]); //构造选项
document.myform.city.options.add(cityOption);
}
}
</script>
</head>
<body onload="createProvince()">
<form name="myform" >
<select name="province" id="province" onchange="createcity()">
</select>
<select name="city" id="city">
<option>--请选择城市--</option>
</select>
</form>
</body>
</html>
代码2.直接将值写入第一个列表框，用函数createcity（）加载相应的第二个列表框中的值
<html>
<head>
<title> 级联菜单测试2 </title>
<script language="javascript">
function createcity(){
var citylist = new Array();
citylist['--请选择省份--'] = ['--请选择城市--'];
citylist['北京市'] = ['东城区', '西城区', '海淀区', '朝阳区', '大兴区', '昌平区', '怀柔'];
citylist['福建省'] = ['福州市', '厦门市', '泉州市', '龙岩市', '三明市'];
citylist['湖北省'] = ['武汉', '宜昌', '襄樊', '黄石', '黄冈', '十堰'];
//获得选中的省份值
var selectedProv=document.myform.province.value; //value值,只能是option中的value属性值，与<option></option>中的值没有关系，其只作为一个文本内容来显示，而不作为有效的参数。
var cityOption;
//清空城市列表框中原来的所有选项
document.myform.city.options.length=0;
//添加对应省份的所有城市
for (var city = 0; city < citylist[selectedProv].length; city++) {
cityOption = new Option(citylist[selectedProv][city], citylist[selectedProv][city]); //构造选项
document.myform.city.options.add(cityOption);
}
}
</script>
</head>
<body onload="createProvince()">
<form name="myform" >
<select name="province" id="province" onchange="createcity()">
<option value="--请选择省份--">--请选择省份--</option>
<option value="北京市">北京市</option>
<option value="福建省">福建省</option>
<option value="湖北省">湖北省</option>
</select>
<select name="city" id="city">
<option>--请选择城市--</option>
</select>
</form>
</body>
</html>
通过以上的对比可以发现，<option value=“value”></option>标签中的文本只是作为文本显示，而有效的参数值是value属性的值。
分享到：
相关推荐
二级级联菜单意味着主菜单有一个子菜单，而三级级联菜单则在二级的基础上再增加一级子菜单。例如，一个网站的导航栏可能有"产品"这个主菜单，点击后展开显示"电子产品"、"家居用品"等二级子菜单，进一步点击"电子...
在本例中，我们讨论的是通过JavaScript实现的二级级联菜单，即在一个文本框的选择会影响到另一个文本框的可选项。 一、级联菜单的基本概念 级联菜单由多个层次的菜单项构成，通常表现为一个菜单项展开后显示下一级...
实现二级级联菜单主要涉及以下几个步骤： 1. **数据库设计**： 在数据库层面，你需要创建一个表来存储类别信息，这个表通常包含`id`（唯一标识符）、`name`（类别名称）、`parent_id`（父类别ID）等字段。通过`...
本文将详细介绍如何使用JSP技术实现一个简单的级联菜单功能。 #### 二、基础知识简介 1. **JSP (Java Server Pages)**：是一种基于Java技术的动态网页技术标准，用于创建动态网页内容。它允许开发者将HTML代码与...
jsp级联菜单源代码 保证最简单的代码， 只要见过、研究过jsp就能看的懂。
总之，通过结合Java Web技术和数据库，我们可以实现动态的二级级联下拉菜单，为用户提供直观且易于操作的界面。这个过程涉及到数据库设计、后端服务开发以及前端交互等多个环节，对提升开发者综合能力非常有帮助。
在IT领域，构建动态、交互性强的Web应用是常见的需求，而"JSP+AJAX+MYSQL实现二级级联菜单"就是一个典型的实例。这个技术组合主要用于创建能够实时更新且具有前后端交互功能的Web界面，使得用户在选择一级菜单时，...
本篇文章将深入探讨如何利用DWR来实现一个两级级联菜单，并以SQL Server 2000数据库作为数据源。 首先，我们需要理解DWR的基本工作原理。DWR允许在后台执行Java方法并返回结果到前端，无需刷新整个页面。这种技术...
标题中的“三级级联菜单（JS+HTML)”指的是在网页设计中使用JavaScript和HTML实现的具有三级结构的下拉菜单。这种菜单允许用户通过点击主菜单项来展开子菜单，进一步点击子菜单项可以展开更深层次的选项，提供了一种...
在本案例中，我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件，它使得用户能够在下拉菜单中选择省份、城市以及区县，以实现快速筛选或输入数据的目的。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
本项目“jquery仿京东二级级联菜单导航”旨在实现一个类似京东商城的下拉二级菜单，利用jQuery库来增强用户体验。这个功能通常用于大型网站，尤其是电商网站，因为它们通常具有多级分类，通过级联菜单可以有效地展示...
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
在使用JSP JavaScript过程中有很多的技巧与实现，那么如何构建二级级联下拉菜单呢，本文将会向你做一个源码上的介绍。
本示例中的".net MVC架构下无刷新三级级联菜单源码"是一个典型的前端与后端交互场景，它展示了如何利用ASP.NET MVC框架以及DropdownList控件来实现一个动态的、无需页面刷新的三级级联菜单。这个菜单的数据是从...
其次，两级菜单是指菜单中有两个层次的选项，用户先选择一级菜单，然后二级菜单才会显示出来，这通常用于减少屏幕空间的占用，同时保持良好的用户体验。在安卓中，可以通过自定义View或者使用第三方库如`SlidingMenu...
在这个级联菜单的实现中，`Fragment`可能会被用来承载一级菜单或者二级菜单的内容，使得菜单可以在不同的屏幕尺寸和设备上都能正确展示。 此外，项目的实现可能包括以下几个步骤： 1. 创建自定义`PopupWindow`：这...
这个“三级级联菜单”可能是一个精心设计的实现，提供了优秀的用户体验，使得三层级别的信息结构能够流畅地展现给用户。 在网页的HTML（ceshi.htm）中，通常会看到`<ul>`和`<li>`元素的嵌套使用来创建级联菜单的...
本资源提供的"级联菜单，两级菜单自定义实现提供多种方式"是一个Android源码示例，旨在帮助开发者理解如何在Android应用中实现这种交互效果。下面我们将详细探讨实现这种功能的关键知识点。 首先，级联菜单的基本...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...