<HTML>
<HEAD>
<TITLE>动态改变下拉菜单内容示例</TITLE>
</HEAD>
<SCRIPT LANGUAGE=javascript>
//定义一个二维数组aArray,用于存放城市名称。
var aCity=new Array();
aCity[0]=new Array();
aCity[1]=new Array();
aCity[2]=new Array();
aCity[3]=new Array();
//赋值，每个省份的城市存放于数组的一行。
aCity[0][0]="--请选择--";
aCity[1][0]="--请选择--";
aCity[1][1]="广州市";
aCity[1][2]="深圳市";
aCity[1][3]="珠海市";
aCity[1][4]="汕头市";
aCity[1][5]="佛山市";
aCity[2][0]="--请选择--";
aCity[2][1]="长沙市";
aCity[2][2]="株州市";
aCity[2][3]="湘潭市";
aCity[3][0]="--请选择--";
aCity[3][1]="杭州市";
aCity[3][2]="苏州市";
aCity[3][3]="温州市";
function ChangeCity()
{
var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex;
iCityCount=0;
while (aCity[iProvinceIndex][iCityCount]!=null)
iCityCount++;
//计算选定省份的城市个数
document.frm.optCity.length=iCityCount;//改变下拉菜单的选项数
for (i=0;i<=iCityCount-1;i++)//改变下拉菜单的内容
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
document.frm.optCity.focus();
}
</SCRIPT>
<BODY ONfocus=ChangeCity()>
<H3>选择你所在的省份及城市</H3>
<FORM NAME="frm">
<P>省份：
<SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()>
<OPTION>--请选择--</OPTION>
<OPTION>广东省</OPTION>
<OPTION>湖南省</OPTION>
<OPTION>浙江省</OPTION>
</SELECT>
</P>
<P>城市：
<SELECT NAME="optCity" SIZE="1">
<OPTION>--请选择--</OPTION>
</SELECT>
</P>
</FORM>
</BODY>
</HTML>
分享到：
相关推荐
实现级联下拉框效果，我们通常需要两个或多个`<select>`元素，并通过JavaScript监听第一个下拉框的`change`事件。当用户更改选择时，触发事件处理函数，根据选定的值动态更新第二个下拉框的选项。 以下是一个简单的...
总的来说，这个“超简单的级联下拉框例子”展示了如何在不使用数组的情况下，通过动态DOM操作和简洁的代码实现级联下拉框功能。这样的实现方式有利于代码的可读性和维护性，同时也提供了良好的用户体验。通过深入...
总之，“好用简单的可编辑级联下拉框”是提高用户体验的一种有效手段，它结合了输入和级联选择的优点，对于开发人员来说，理解和实现这样的组件能提升他们的前端技能，对于用户来说，这样的设计无疑会使他们在使用...
在本文中，我们将探讨如何使用jQuery实现级联下拉框的效果，这是一个常见的前端交互功能，常用于数据筛选和表单填写。级联下拉框允许用户在一个下拉框中做出选择后，根据所选内容动态更新下一个下拉框的选项。这种...
级联下拉框是由两个或多个相互关联的下拉列表组成，当用户在第一个下拉框中做出选择时，第二个下拉框会根据选择更新其可选值。这种联动效果可以实现多层分类的筛选，例如省份-城市-区县的逐级选择。 2. **使用数据...
在Android开发中，有时...总之，实现Android城市级联下拉框（自定义Spinner）需要对Spinner的基本使用、事件监听、数据更新以及界面定制有深入了解。通过不断实践和优化，我们可以创建出用户体验优秀的级联选择组件。
JavaScript负责实现交互逻辑，这里的级联和多选功能很可能是由JavaScript驱动的。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画等功能。在这个源码中，可能使用了jQuery选择器来定位HTML元素，...
这个DEMO通过实现级联下拉框，为用户提供了更高效、更直观的筛选和查找服务。 1. **Android搜索选择**: 在Android平台上，搜索功能通常涉及到EditText组件，用户可以在其中输入关键词进行查询。而添加选择功能则...
在级联下拉框中，当用户在第一个下拉框中做出选择后，通过AJAX发送请求到服务器，服务器根据选择的值返回相应的数据，然后前端使用JavaScript处理这些数据，更新第二个下拉框的内容。 2. **HTML结构** 首先，我们...
动态级联下拉框构件是一种常见的前端交互组件，主要用于实现多级联动选择的效果。在网页设计中，这种组件常用于地址选择、分类筛选等场景，用户在选择一级选项后，二级甚至多级相关的下拉框内容会随之更新，提供更...
**Ajax 实现可配置无刷新级联下拉框** 在 Web 开发中，为了提供用户友好的交互体验，级联下拉框（Cascading Dropdown）是一个常见的需求。级联下拉框允许用户在一个下拉框中选择一个选项后，根据所选的选项动态更新...
内部为四级的级联下拉框，分别为省份，市，县及区和镇及街道四级下拉框；（适用任何语言的纯HTML）详细截图可访问：https://blog.csdn.net/weixin_43972758/article/details/86510419 进行查询。
要实现级联下拉框，我们需要监听第一个下拉框的`change`事件，并根据其值来填充第二个下拉框，同样的逻辑也应用于第二个下拉框与第三个下拉框之间。 在HTML结构中，通常每个下拉框会被赋予一个唯一的ID，以便在...
7. **文件名称“级联下拉菜单”**：这个文件可能是包含实现级联下拉框所需的所有代码的资源包，包括HTML模板、CSS样式文件、JavaScript脚本以及可能的服务器端代码。 总结来说，实现一个跨浏览器的级联下拉框涉及...
综上所述，"省市地区 局部刷新 级联下拉框"的实现涉及到ASP.Net的多个技术层面，包括后端的C#处理、前端的AJAX和JavaScript交互、数据库操作、以及UI设计。理解并掌握这些知识点是构建高效、响应式的Web应用程序的...
在本案例中，我们将讨论如何使用jQuery库来实现无限极联的级联下拉框，并探讨其实现原理和关键代码。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件...
5. **JSP渲染**：Action将查询结果传递给JSP页面，JSP使用JavaScript或jQuery库（如AJAX）来动态更新第二个下拉框的内容。 在“rdonetomore”这个文件中，很可能包含了项目的源代码、配置文件、数据库脚本等资源。...
使用jquery写的级联下拉框,使用jquery写的级联下拉框
在Ext JS框架中，实现级联下拉框是通过“combobox”组件的级联配置来完成的。 标题中的"Ext combo 下拉框级联"指的是在Ext JS框架中使用Combobox组件创建级联下拉框的功能。Ext JS是一个强大的JavaScript UI库，...