`
danielhjd
  • 浏览: 246299 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

实现两级下拉选项的代码

    博客分类:
  • Java
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="JavaScript" type="text/javascript">
<!--
//按照省份下拉列表框的顺序定义二维数组,将城市列表对应到省份
var city=[
["北京","天津","上海","重庆"], //直辖市
["南京","苏州","南通","常州"], //江苏省
["福州","福安","龙岩","南平"], //福建省
["广州","潮阳","潮州","澄海"], //广东省
["兰州","白银","定西","敦煌"] //甘肃省
];

function getCity(){
//获得身省份和城市下拉列表框的引用
var sltProvince=document.forms["theForm"].elements["province"];
var sltCity=document.forms["theForm"].elements["city"];
//得到对应于省份的城市列表数组
var provinceCity=city[sltProvince.selectedIndex-1];

//将城市下拉列表框清空,仅留第一个提示选项
sltCity.length=1;
//将相应省市的城市填充到城市选择框中
for(var i=0;i<provinceCity.length;i++){
//创建新的Option对象并将其添加到城市下拉列表框中
// 第一个provinceCity是显示的值,第二个代码是provinceCity为value值
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
//-->
</script>
</head>
<body>

<form action="somepage.jsp" name="theForm">
<select name="province" onchange="getCity()">
<option value="0">请选择所在省份</option>
<option value="直辖市">直辖市</option>
<option value="江苏省">江苏省</option>
<option value="福建省">福建省</option>
<option value="广东省">广东省</option>
<option value="甘肃省">甘肃省</option>
</select>
<select name="city">
<option value="0">请选择所在城市</option>
</select>
</form>
</body>
</html>
分享到:
评论

相关推荐

    jquery鼠标滑过显示二级下拉菜单代码

    本教程将深入讲解如何使用jQuery来实现鼠标滑过显示二级下拉菜单的代码实现。 首先,我们需要了解HTML结构。一个基本的二级下拉菜单通常由`&lt;ul&gt;`元素构建,其中包含一级菜单项`&lt;li&gt;`,每个一级菜单项内嵌套另一个`...

    jQuery导航条三级下拉菜单代码.zip

    本项目名为"jQuery导航条三级下拉菜单代码",包含两个版本,可能是为了提供不同的实现方式或功能优化。 首先,`index.html`文件是网页的主文件,它包含了HTML结构,包括导航条的HTML标记。一个典型的三级下拉菜单的...

    php代码实现二级联动下拉菜单效果

    它是指当用户在一个下拉菜单中选择一个选项时,另一个相关的下拉菜单会根据用户的选择动态地更新其选项。这通常涉及到两个主要的HTML下拉列表(`&lt;select&gt;`元素)和JavaScript或AJAX来处理事件和数据传递。 在PHP中...

    两级的网页下拉菜单代码.rar

    "两级的网页下拉菜单代码" 提供了一种实现这种功能的解决方案,特别强调了圆角风格和鼠标悬停效果,这使得交互更加友好且视觉上更吸引人。 一、下拉菜单原理 下拉菜单的基本原理是利用HTML、CSS和JavaScript(或...

    jQuery鼠标滑过显示二级下拉菜单代码.zip

    本主题聚焦于使用jQuery库来实现一个鼠标滑过时显示二级下拉菜单的代码实例。jQuery是一个轻量级、功能强大的JavaScript库,它简化了JavaScript的事件处理、动画效果以及Ajax交互,使得创建动态网页变得更加简单。 ...

    android中的listview实现二级下拉菜单效果

    而实现二级下拉菜单效果,通常是构建复杂布局或者模仿导航栏功能时的需求,这在很多应用程序中都十分常见,如电子商务应用的商品分类、设置菜单等。本篇文章将详细讲解如何在Android中利用ListView实现二级下拉菜单...

    jQuery黑色三级下拉导航菜单代码.zip

    "jQuery黑色三级下拉导航菜单代码.zip"是一个专门用于创建高效、美观的导航栏的资源包,尤其适用于那些希望实现多级下拉效果的开发者。这个资源基于两个核心JavaScript库:jQuery 1.8.3 和 responsive-menu.js。 ...

    asp 二级下拉菜单 二级菜单

    在这个场景中,"asp 二级下拉菜单 二级菜单" 的目标是利用ASP技术实现一个可以展示网站栏目二级子菜单的下拉功能。 首先,我们来看看`main.asp`文件。这个文件很可能是页面的主要入口点,包含整个下拉菜单系统的...

    红色CSS3网站导航三级下拉菜单代码

    本资源提供的是一款基于CSS3的红色风格网站导航三级下拉菜单代码,适用于构建具有视觉吸引力且功能完善的网页导航系统。 首先,我们要理解CSS3(Cascading Style Sheets Level 3)是CSS规范的最新版本,它引入了...

    jQuery简单实现两级下拉菜单效果代码

    本文实例讲述了jQuery简单实现两级下拉菜单效果代码。分享给大家供大家参考。具体如下: 这是一款两级下拉菜单,jquery插件版,在IE6/IE7/IE8下运行良好,在本示例中,菜单仅显示了四组,不过原理是一样的,菜单较长...

    三级下拉菜单

    - **组合框**:VBA中的组合框是实现三级下拉菜单的关键。我们需要为每个级别创建一个组合框,并在它们之间建立联动。当用户在上级菜单中选择一项时,相应的子菜单会显示出来。 ### 4. VBA代码示例 ```vba Private ...

    Android 两级下拉列表实现

    本篇文章将详细讲解如何利用Android的Spinner组件实现一个两级下拉列表的Demo。 首先,`Spinner`是Android SDK提供的一种控件,它允许用户在一组选项中进行选择,并在默认状态下显示其中一个选项。它通常用于节省...

    ios-纯代码实现多级菜单下拉选项.zip

    这个“ios-纯代码实现多级菜单下拉选项.zip”项目提供了一个使用UITableView实现这一功能的示例。下面我们将深入探讨如何通过纯代码来构建这样一个交互式菜单系统。 首先,我们要理解UITableView的基本原理。...

    Java代码实现两级联动

    在IT行业中,"两级联动"通常指的是在一个界面上有两个下拉菜单,它们之间存在关联关系。当用户在第一个下拉菜单(一级菜单)选择一个选项时,第二个下拉菜单(二级菜单)的内容会根据一级菜单的选择动态更新。这种...

    简单的jQuery无限级多级导航下拉菜单代码

    "简单的jQuery无限级多级导航下拉菜单代码"提供了一个高效且易于实现的解决方案,它允许网页设计师创建从二级到无限级的下拉菜单,使用户能够方便地浏览和访问网站的各个部分。 首先,我们需要理解jQuery库在其中的...

    支持FF、IE6下很实用的三级下拉菜单

    "支持FF、IE6下面很实用的三级下拉菜单"这个主题聚焦于在两种不同的浏览器环境——Firefox(FF)和Internet Explorer 6(IE6)上实现这样的功能。由于这两个浏览器在处理CSS和JavaScript方面存在显著差异,因此设计...

    swift-点击出现的下拉菜单简单设置数据源就可以实现效果

    根据你的需求,填充这两个方法,定义下拉菜单的条目数量和每个条目的标题。 最后,我们需要在按钮的点击事件中初始化并展示下拉菜单: ```swift @IBAction func menuButtonTapped(_ sender: UIButton) { let ...

    二级下拉菜单

    在Android开发中,二级下拉菜单通常用于提供更复杂的导航结构,它可以帮助用户在层级较多的数据中进行选择。本文将详细讲解如何实现一个自定义的`ExpandableListView`,以创建这种交互效果。 `ExpandableListView`...

Global site tag (gtag.js) - Google Analytics