1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <script type="text/javascript">
  7. 	function checkSelect(xueqi){
  8. 		var option1,option2;
  9. 		switch (xueqi) {
  10. 		case "第一学期":
  11. 			option1 = new Option("HTML","HTML");
  12. 			option2 = new Option("Java","Java");
  13. 			break;
  14.  
  15. 		case "第二学期":
  16. 			option1 = new Option("Sqlserver","Sqlserver");
  17. 			option2 = new Option(".Net",".Net");
  18. 			break;
  19. 		case "第二学年":
  20. 			option1 = new Option("Struts","Structs");
  21. 			option2 = new Option("Ajax","Ajax");
  22. 			break;
  23. 		}
  24. 		document.getElementById("subject").length = 1;
  25. 		document.getElementById("subject").options.add(option1);
  26. 		document.getElementById("subject").options.add(option2);
  27. 	}
  28.  
  29. 	function checkPro(obj){
  30. 		var arr = new Array();
  31. 		arr["浙江"] = ["杭州","嘉兴","湖州"];
  32. 		arr["江苏"] = ["南京","苏州","南通"];
  33. 		arr["福建"] = ["福州","厦门","福鼎"];
  34.  
  35. 		var proValue = obj.value;
  36. 		document.getElementById("city").length = 1;
  37.  
  38. 		for ( var i in arr[proValue]) {
  39. 			var options;
  40. 			options = new Option(arr[proValue][i],arr[proValue][i]);
  41. 			document.getElementById("city").options.add(options);
  42. 		}
  43. 	}
  44. </script>
  45. </head>
  46. <body>
  47. 	<form method="get" name="jsForm">
  48. 		<table>
  49. 			<tr>
  50. 				<td>考试申请</td>
  51. 			</tr>
  52. 			<tr>
  53. 				<td>
  54. 					学期
  55. 				</td>
  56. 				<td>
  57. 					<select name="xueqi" onchange="checkSelect(this.value)">
  58. 						<option value="">--请选择学期--</option>
  59. 						<option value="第一学期">第一学期</option>
  60. 						<option value="第一学期">第二学期</option>
  61. 						<option value="第二学年">第二学年</option>
  62. 					</select>
  63. 				</td>
  64. 			</tr>
  65. 			<tr>
  66. 				<td>
  67. 					课程
  68. 				</td>
  69. 				<td>
  70. 					<select name="subject" id="subject">
  71. 						<option value="">--请选择相相应学期的课程--</option>
  72. 					</select>
  73. 				</td>
  74. 			</tr>
  75. 			<tr>
  76. 				<td>
  77. 					省份：
  78. 				</td>
  79. 				<td>
  80. 					<select name="xueqi" onchange="checkPro(this)">
  81. 						<option value="" >--请选择省份--</option>
  82. 						<option value="浙江">浙江</option>
  83. 						<option value="江苏">江苏</option>
  84. 						<option value="福建">福建</option>
  85. 					</select>
  86. 				</td>
  87. 			</tr>
  88. 			<tr>
  89. 				<td>
  90. 					城市：
  91. 				</td>
  92. 				<td>
  93. 					<select name="city" id="city">
  94. 						<option value="">--请选择相相应省份的城市--</option>
  95. 					</select>
  96. 				</td>
  97. 			</tr>
  98. 		</table>
  99.  
  100. 	</form>
  101. </body>
  102. </html>
  103.  
  104. <pre name="code" class="html">checkSelect()方法属于不推荐的 ，可是也能够实现
  105. <pre name="code" class="html">checkPro(obj)推荐使用 而且在 js里面数组下表能够用 汉字来选择，更加easy理解
  1.  
  1.  

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

  1. 杂项一之js，<select>标签

    一.在aspx页面中实现 修改与删除页面的跳转 前台js部分: 在上部的js部分中写,根据传过来的id,来经行页面的跳转,并把id传过去 js部分就是实现了一个页面跳转的功能 (还有确认框confir ...

  2. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  3. js获取select标签选中的值[转]

    var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 选中索引 va ...

  4. js中select标签中的option选择

    f1 = function () { //var selected_val = document.getElementById(test).value; var obj = document.getE ...

  5. 【JS】<select>标签小结

    循环时通过<c:if>来判断是否为默认选中 <select name="select" id="month"> <c:forEac ...

  6. js利用select标签生成简易计算功能

    html中使用select option作为运算符的承接容器,输入值,选择不同运算符,计算结果. 文章地址 https://www.cnblogs.com/sandraryan/ <!DOCTY ...

  7. js获取select标签选中的值

    <p>        城市:         <select id="Select1" name="D1">            &l ...

  8. js获取select标签选中的值及文本

    原生js方式: var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // ...

  9. select标签 禁止选择但又能通过序列化form表单传值到后台

    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁止选择但又能通过序列化form表单传值到后台,但是当我们使用disabled="disabled"时发现,无法序列化 ...

随机推荐

  1. JavaScript递归简单实现个对象深拷贝

    JavaScript中对象的深拷贝来说一直都算比较恶心 毕竟没有什么api能直接全拷贝了 得自己便利写  最近在项目中需要深拷贝 自己简单封了个方法 话不多说 直接上码 <!DOCTYPE ht ...

  2. luogu P1455 搭配购买

    题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商品,这个店里有n朵云,云朵已经 ...

  3. (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)

    openssl  rsa      是RSA对称密钥的处理工具 openssl  pkey   是通用非对称密钥处理工具,它们用法基本一致,所以只举例说明openssl rsa. 它们的用法很简单,基 ...

  4. python计算圆面积

    #coding=gbk #coding=utf-8 #-*- coding: UTF-8 -*- #调用math包处理相关的运算 import math #圆半径 r = 2 #计算圆面积π*r*r与 ...

  5. 微信小程序request请求动态获取数据

    微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...

  6. 数据结构实验7：实现二分查找、二叉排序（查找）树和AVL树

    实验7 学号:      姓名:     专业: 7.1实验目的 (1) 掌握顺序表的查找方法,尤其是二分查找方法. (2) 掌握二叉排序树的建立及查找. 查找是软件设计中的最常用的运算,查找所涉及到 ...

  7. MyBatis 3 分页

    利用MyBatis 3进行分页,选定的数据库表c_province,有3列,id列,provinceid列,province列,用Oracle数据库.首先建立一个对应的实体类,Province有3个属 ...

  8. java中如何将string转化成long

  9. 谁才是最强战舰！-From 南京理工大学第八届程序设计大赛(校外镜像),博弈~~

    谁才是最强战舰! Time Limit: 1000MS Memory Limit: 65536KB Description 依阿华来到镇守府的第一件事情,就是找大和solo!然而这并不是什么好消息,说 ...

  10. Codeforces Round #277 (Div. 2 Only)

    A:SwapSort http://codeforces.com/problemset/problem/489/A 题目大意:将一个序列排序,可以交换任意两个数字,但要求交换的次数不超过n,输出任意一 ...