省市级联选择：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var province=document.myform.selProvince.value;
//alert(province);
var newOption1,newOption2;
switch(province){//根据用户选择的省份，动态创建“城市”下拉框选项
case "四川省" :
newOption1=new Option("成都市","chendu");//创建一个下拉框选项
newOption2=new Option("泸州市","luzhou");
break;
case "湖北省" :
newOption1=new Option("武汉市","wuhan");
newOption2=new Option("襄樊市","xiangfan");
break;
case "山东省" :
newOption1=new Option("青岛市","qingdao");
newOption2=new Option("烟台市","yantai");
break;
}
document.myform.selCity.options.length=0;
document.myform.selCity.options.add(newOption1);
document.myform.selCity.options.add(newOption2);
}
</script>
</head>
<body>
<form name="myform" action="">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户账号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市--</option>
</select>
</form>
</body>
</html>
用数组优化省市级联选择：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var cityList=new Array();
cityList[0]=['城都','绵阳','德阳','自贡','内江','乐山','南充','雅安','眉山','甘孜','凉山','泸州'];
cityList[1]=['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照'];
cityList[2]=['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江'];
//获得省份选项的索引号，如四川省为1，比对应的数组索引号多1
var pIndex=document.myform.selProvince.selectedIndex-1;
var newOption1;
document.myform.selCity.options.length=0;//清空“城市”下拉框原内容
for(var j in cityList[pIndex]){
newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户帐号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市</option>
</select>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCity(){
var cityList=new Array();
cityList['山东省']=['城都','绵阳','德阳','自贡','内江','乐山','南充','雅安','眉山','甘孜','凉山','泸州'];
cityList['四川省']=['济南','青岛','淄博','枣庄','东营','烟台','潍坊','济宁','泰安','威海','日照'];
cityList['湖北省']=['武汉','宜昌','荆州','襄樊','黄石','荆门','黄冈','十堰','恩施','潜江'];
//获得省份选项的索引号，如四川省为1，比对应的数组索引号多1
var pIndex=document.myform.selProvince.value;
var newOption1;
document.myform.selCity.options.length=0;//清空“城市”下拉框原内容
for(var j in cityList[pIndex]){
newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
document.myform.selCity.options.add(newOption1);
}
}
</script>
</head>
<body>
<form action="" name="myform">
省份：
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户帐号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
</select>
城市：
<select name="selCity">
<option>--请选择开户帐号的城市</option>
</select>
</form>
</body>
</html>
分享到：
相关推荐
JavaScript学习（一） JavaScript是一种广泛应用于网页和网络应用的脚本语言，由 Netscape 的 Brendan Eich 在1995年发明。它主要用于客户端的网页交互，赋予网页动态功能，如响应用户操作、处理数据、与服务器通信...
这份"JavaScript学习指南"高清PDF，无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面，我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**：JavaScript的基础包括变量、...
这个“JavaScript帮助学习文档”包含了丰富的资源，旨在帮助初学者和进阶者深入理解和掌握JavaScript的核心概念。 首先，JavaScript的基础知识是至关重要的。这包括变量、数据类型（如字符串、数字、布尔值、数组、...
本“JavaScript学习指南”源代码包含了深入理解并掌握JavaScript编程的关键知识点。 一、基础语法 JavaScript的基础语法包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、undefined、...
这份"非常全面的JavaScript学习资料"压缩包，包含了11个深入学习JavaScript的文件，旨在为学习者提供一个详尽且丰富的学习路径。 1. **基础概念**：JavaScript的基础包括变量、数据类型（如字符串、数字、布尔值、...
个人Javascript学习笔记 精华版 本资源为个人Javascript学习笔记的精华版，涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明： 1. 什么是JavaScript...
本书“JavaScript学习指南”旨在帮助初学者和有经验的开发者深入理解和掌握JavaScript的核心概念和技术。 首先，JavaScript在网页中的主要作用是处理用户交互、操作DOM（文档对象模型）、进行AJAX（异步JavaScript...
本资源包"JavaScript学习资料全面整理"显然是为了帮助初学者和进阶者深入理解这门语言，包含了各种资源，下面将对JavaScript的一些关键知识点进行详细阐述。 1. **基础概念**：JavaScript是一种解释型、弱类型、...
我们实习的时候，团队中各组员分别学习并总结的劳动成果，JavaScript基础教程第7版（人民邮电出版社），很全面的知识总结，现在我拿来，分享给想学习JavaScript的求知者，积分要的不多，也算是给我们劳动成果的一点...
JavaScript学习是一个持续的过程，随着技术的发展，新的API和最佳实践不断涌现。因此，保持学习和关注最新的前端趋势至关重要。同时，实践是检验知识的最好方式，多做项目、参与开源社区，可以提升你的技能并积累...
七、字符串与数字转换 `parseInt()`, `parseFloat()`用于将字符串转换为整数或浮点数，而`toString()`则将数值转换为字符串。 总结，JavaScript中的字符串是处理文本数据的基本工具。理解和掌握字符串的特性及操作...
1.3.2 在HTML中嵌入JavaScript 7 1.3.3 链接JavaScript文件 9 1.4 编写JavaScript的工具 11 1.4.1 使用纯文本编辑器 11 1.4.2 使用专业化脚本编辑工具 13 1.4.3 使用Microsoft脚本编辑器 15 第2章 JavaScript编程...
以下是一些关于JavaScript学习的关键知识点： 1. **基础语法**：JavaScript的基础包括变量、数据类型（如字符串、数字、布尔值、null、undefined）、操作符（算术、比较、逻辑）、流程控制（条件语句、循环语句）...
七、 JavaScript 在表单中的应用 * 表单是HTML中的一种基本结构单元 * 表单可以使用JavaScript来实现交互功能 * 表单可以使用JavaScript来实现数据的验证 * 表单可以使用JavaScript来实现数据的提交 该资源涵盖了...
以下是一些关于JavaScript学习的重要知识点： 1. **基础语法**：JavaScript的基础包括变量、数据类型（如字符串、数字、布尔值、null、undefined、对象和数组）、操作符（算术、比较、逻辑、赋值等）、流程控制...
这个压缩包中的“史上最全的JavaScript学习资料”显然包含了一系列丰富的资源，旨在帮助学习者深入理解和掌握JavaScript。 JavaScript最初由Netscape公司的Brendan Eich设计，目的是为了解决网页动态交互的问题，使...
《JavaScript学习指南（美）鲍尔斯》是一本深入浅出的JavaScript编程教程，作者通过丰富的实例和详尽的解释，帮助读者掌握这门强大的脚本语言。源代码部分提供了书中各个章节练习和示例的实现，是理解并实践...
目录： 第一章 javascript语言概述 第二章 JavaScript语言基础 第三章 JavaScript事件处理 第四章 JavaScript基于对象编程 第六章 string，math，array等数据对象 第七章 window及相关顶级对象 第八章 document对象
这个"一个不错的JavaScript的学习软件"显然提供了一个实践和理解JavaScript的平台，特别是对于初学者来说，它是一个很好的资源。 HTML（HyperText Markup Language）是网页内容的基础结构，而CSS（Cascading Style ...