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

javascript学习七

 
阅读更多

省市级联选择:

<!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学习(一) JavaScript是一种广泛应用于网页和网络应用的脚本语言,由 Netscape 的 Brendan Eich 在1995年发明。它主要用于客户端的网页交互,赋予网页动态功能,如响应用户操作、处理数据、与服务器通信...

    JavaScript学习指南 高清 PDF

    这份"JavaScript学习指南"高清PDF,无疑为想要深入理解JavaScript的初学者或有一定基础的开发者提供了宝贵的资源。下面,我们将深入探讨JavaScript的一些关键知识点。 1. **基础语法**:JavaScript的基础包括变量、...

    JavaScript 帮助 学习 文档

    这个“JavaScript帮助学习文档”包含了丰富的资源,旨在帮助初学者和进阶者深入理解和掌握JavaScript的核心概念。 首先,JavaScript的基础知识是至关重要的。这包括变量、数据类型(如字符串、数字、布尔值、数组、...

    JavaScript学习指南 源代码

    本“JavaScript学习指南”源代码包含了深入理解并掌握JavaScript编程的关键知识点。 一、基础语法 JavaScript的基础语法包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、...

    非常全面的JavaScript学习资料

    这份"非常全面的JavaScript学习资料"压缩包,包含了11个深入学习JavaScript的文件,旨在为学习者提供一个详尽且丰富的学习路径。 1. **基础概念**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册六:JS条件语句

    JavaScript是Web前端开发的核心语言之一,它为网页和应用程序提供了动态交互的能力。在JavaScript中,条件语句是...在头歌教学实践平台的Web前端开发课程中,这些基础知识的学习和实践将为你的编程技能打下坚实的基础。

    个人Javascript学习笔记 精华版

    个人Javascript学习笔记 精华版 本资源为个人Javascript学习笔记的精华版,涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明: 1. 什么是JavaScript...

    JavaScript学习指南带书签PDF

    本书“JavaScript学习指南”旨在帮助初学者和有经验的开发者深入理解和掌握JavaScript的核心概念和技术。 首先,JavaScript在网页中的主要作用是处理用户交互、操作DOM(文档对象模型)、进行AJAX(异步JavaScript...

    JavaScript学习资料全面整理

    本资源包"JavaScript学习资料全面整理"显然是为了帮助初学者和进阶者深入理解这门语言,包含了各种资源,下面将对JavaScript的一些关键知识点进行详细阐述。 1. **基础概念**:JavaScript是一种解释型、弱类型、...

    JavaScript,JavaScript最全面的学习资料【JavaScript基础教程第7版】

    我们实习的时候,团队中各组员分别学习并总结的劳动成果,JavaScript基础教程第7版(人民邮电出版社),很全面的知识总结,现在我拿来,分享给想学习JavaScript的求知者,积分要的不多,也算是给我们劳动成果的一点...

    javascript学习

    JavaScript学习是一个持续的过程,随着技术的发展,新的API和最佳实践不断涌现。因此,保持学习和关注最新的前端趋势至关重要。同时,实践是检验知识的最好方式,多做项目、参与开源社区,可以提升你的技能并积累...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册九:字符串

    七、字符串与数字转换 `parseInt()`, `parseFloat()`用于将字符串转换为整数或浮点数,而`toString()`则将数值转换为字符串。 总结,JavaScript中的字符串是处理文本数据的基本工具。理解和掌握字符串的特性及操作...

    javascript完全学习手册1 源码

    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学习资料

    以下是一些关于JavaScript学习的关键知识点: 1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null、undefined)、操作符(算术、比较、逻辑)、流程控制(条件语句、循环语句)...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    七、 JavaScript 在表单中的应用 * 表单是HTML中的一种基本结构单元 * 表单可以使用JavaScript来实现交互功能 * 表单可以使用JavaScript来实现数据的验证 * 表单可以使用JavaScript来实现数据的提交 该资源涵盖了...

    JavaScript学习资源

    以下是一些关于JavaScript学习的重要知识点: 1. **基础语法**:JavaScript的基础包括变量、数据类型(如字符串、数字、布尔值、null、undefined、对象和数组)、操作符(算术、比较、逻辑、赋值等)、流程控制...

    史上最全的JavaScript学习资料

    这个压缩包中的“史上最全的JavaScript学习资料”显然包含了一系列丰富的资源,旨在帮助学习者深入理解和掌握JavaScript。 JavaScript最初由Netscape公司的Brendan Eich设计,目的是为了解决网页动态交互的问题,使...

    [JavaScript学习指南(美)鲍尔斯].源代码

    《JavaScript学习指南(美)鲍尔斯》是一本深入浅出的JavaScript编程教程,作者通过丰富的实例和详尽的解释,帮助读者掌握这门强大的脚本语言。源代码部分提供了书中各个章节练习和示例的实现,是理解并实践...

    javascript高级编程学习手册

    目录: 第一章 javascript语言概述 第二章 JavaScript语言基础 第三章 JavaScript事件处理 第四章 JavaScript基于对象编程 第六章 string,math,array等数据对象 第七章 window及相关顶级对象 第八章 document对象

Global site tag (gtag.js) - Google Analytics