使用JS对select标签进行联动选择

最新推荐文章于 2019-06-22 09:54:23 发布

那些特立独行的猪

最新推荐文章于 2019-06-22 09:54:23 发布

阅读量1.7k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014357995/article/details/47777439

版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

<!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" οnchange="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" οnchange="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里面数组下表可以用 汉字来选择，更加容易理解