您的位置：首页 > Web前端 > JavaScript

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

2015-08-19 11:01 661 查看 
<!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里面数组下表可以用 汉字来选择，更加容易理解





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航