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


    <!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 关于 URL 的编码或解码方法
    PHP 获取上一个页面的url
    踩坑 Uncaught RangeError: Maximum call stack size exceeded
    Wordpress 数据库查询错误 Call to a member function get_results() on null
    Chrome autocomplete="off"无效
    js 遍历对象属性(for in、Object.keys、Object.getOwnProperty) 以及高效地输出 js 数组
    PHP PDO fetch() 详解
    Wordpress 自定义文章类型添加 Categoried、Tags
    Mac: mac git 的安装 及实现自动补全
    Uncaught TypeError: Cannot read property of undefined In JavaScript
  • 原文地址:https://www.cnblogs.com/jhcelue/p/7191573.html
Copyright © 2020-2023  润新知