<!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 checkSelect(xueqi){

		var option1,option2;

		switch (xueqi) {

		case "第一学期":

			option1 = new Option("HTML","HTML");

			option2 = new Option("Java","Java");

			break;

		case "第二学期":

			option1 = new Option("Sqlserver","Sqlserver");

			option2 = new Option(".Net",".Net");

			break;

		case "第二学年":

			option1 = new Option("Struts","Structs");

			option2 = new Option("Ajax","Ajax");

			break;

		}

		document.getElementById("subject").length = 1;

		document.getElementById("subject").options.add(option1);

		document.getElementById("subject").options.add(option2);

	}

	function checkPro(obj){

		var arr = new Array();

		arr["浙江"] = ["杭州","嘉兴","湖州"];

		arr["江苏"] = ["南京","苏州","南通"];

		arr["福建"] = ["福州","厦门","福鼎"];

		var proValue = obj.value;

		document.getElementById("city").length = 1;

		for ( var i in arr[proValue]) {

			var options;

			options = new Option(arr[proValue][i],arr[proValue][i]);

			document.getElementById("city").options.add(options);

		}

	}

</script>

</head>

<body>

	<form method="get" name="jsForm">

		<table>

			<tr>

				<td>考试申请</td>

			</tr>

			<tr>

				<td>

					学期

				</td>

				<td>

					<select name="xueqi" onchange="checkSelect(this.value)">

						<option value="">--请选择学期--</option>

						<option value="第一学期">第一学期</option>

						<option value="第一学期">第二学期</option>

						<option value="第二学年">第二学年</option>

					</select>

				</td>

			</tr>

			<tr>

				<td>

					课程

				</td>

				<td>

					<select name="subject" id="subject">

						<option value="">--请选择相相应学期的课程--</option>

					</select>

				</td>

			</tr>

			<tr>

				<td>

					省份：

				</td>

				<td>

					<select name="xueqi" onchange="checkPro(this)">

						<option value="" >--请选择省份--</option>

						<option value="浙江">浙江</option>

						<option value="江苏">江苏</option>

						<option value="福建">福建</option>

					</select>

				</td>

			</tr>

			<tr>

				<td>

					城市：

				</td>

				<td>

					<select name="city" id="city">

						<option value="">--请选择相相应省份的城市--</option>

					</select>

				</td>

			</tr>

		</table>

	</form>

</body>

</html>

<pre name="code" class="html">checkSelect()方法属于不推荐的 ，可是也能够实现

<pre name="code" class="html">checkPro(obj)推荐使用 而且在 js里面数组下表能够用 汉字来选择，更加easy理解






												


											
使用JS对select标签进行联动选择的更多相关文章
	

    
								
  1. 杂项一之js，<select>标签
		
    一.在aspx页面中实现 修改与删除页面的跳转 前台js部分: 在上部的js部分中写,根据传过来的id,来经行页面的跳转,并把id传过去 js部分就是实现了一个页面跳转的功能 (还有确认框confir ...
    
		
    2. 
						
  2. JS操作select标签
		
    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...
    
		
    3. 
						
  3. js获取select标签选中的值[转]
		
    var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 va ...
    
		
    4. 
						
  4. js中select标签中的option选择
		
    f1 = function () { //var selected_val = document.getElementById(test).value; var obj = document.getE ...
    
		
    5. 
						
  5. 【JS】<select>标签小结
		
    循环时通过<c:if>来判断是否为默认选中 <select name="select" id="month"> <c:forEac ...
    
		
    6. 
						
  6. js利用select标签生成简易计算功能
		
    html中使用select option作为运算符的承接容器,输入值,选择不同运算符,计算结果. 文章地址 https://www.cnblogs.com/sandraryan/ <!DOCTY ...
    
		
    7. 
						
  7. js获取select标签选中的值
		
    <p>        城市:         <select id="Select1" name="D1">            &l ...
    
		
    8. 
						
  8. js获取select标签选中的值及文本
		
    原生js方式: var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // ...
    
		
    9. 
						
  9. select标签 禁止选择但又能通过序列化form表单传值到后台
		
    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [题解] codevs 1486 愚蠢的矿工
			
    http://codevs.cn/problem/1486/ 我们比较熟悉二叉树,题目中给出的是一棵多叉树,我们需要将这可二叉树改造成二叉树. 二叉树可以为这样的: 父亲结点左边储存儿子,右边储存兄弟 ...
    
			
    2. 
						
  2. cf上分的失落->高兴->更失落
			
    cf昨日做出一个题居然div2打了1800多名直接上分了...我原以为垂直落地但是....我现在1399差一分就能蓝名了啊啊啊啊,以后不一定会有这个水平的啊,给个蓝名体验卡不行吗,多加一分会死啊... ...
    
			
    3. 
						
  3. 厚溥教育1718部数据库连接作业答案，分装一个操作数据库而无需写SQL语句的函数
			
    <?php header("Content-type:text/html;charset=utf8"); //PHP操作数据库的函数 function phpsql($dbc ...
    
			
    4. 
						
  4. Python自动化测试框架——生成测试报告
			
    如何才能让用例自动运行完之后,生成一张直观可看易懂的测试报告呢? 小编使用的是unittest的一个扩展HTMLTestRunner 环境准备 使用之前,我们需要下载HTMLTestRunner.py ...
    
			
    5. 
						
  5. (16)  Cloudflare pki公钥基础设施
			
    该工具组共有8个工具 1.cfssl 常用的可用指令: sign signs a certificate bundle build a certificate bundle genkey genera ...
    
			
    6. 
						
  6. 201621123079《java程序设计》第六周作业总结
			
    作业06-接口.内部类 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. c ...
    
			
    7. 
						
  7. python 容器 用户注册登录系统
			
    1. 列表和普通变量有什么区别 列表是数据类型,普通变量是用来存储数据的 可以把列表赋值给普通变量 2.存在列表 a = [11, 22, 33], 如何向列表中添加(增)新元素 44 a.appen ...
    
			
    8. 
						
  8. CentOS 6.5 x64 安装Tomcat8 并配置两个Tomcat8
			
    1.首先,安装tomcat的前提是已经配置好jdk环境变量,若没配好可以参考我的上一篇博文:CentOS 6.5 x64安装jdk8,当然也可以通过网络搜索安装步骤~~ 2.下载: 可以通过官网下载: ...
    
			
    9. 
						
  9. shell  for mysql backup in linux
			
    今天上班只有一台linux系统,就学着在linux上写了个脚本,没啥技术含量 省得每天敲代码备份 没有设置自动备份时间,这里可以参照 http://www.th7.cn/db/mysql/201305 ...
    
			
    10. 
						
  10. linux中的vi命令
			
    linux的重要的几个命令如下: ①,光标的操作 1,gg,G,nG,:n gg移到文档的开头一行,G移动到最后一行,nG移动到第n行,到指定的行. 2,H,M,L 光标分别移动到这个界面的最上边,中 ...
    
			
    11.