码迷,mamicode.com
首页 > Web开发 > 详细

jsp+js实现二级级联

时间:2015-05-28 21:35:20      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:级联   城市   省份   专业   学院   

     本文实现学院-专业二级级联,同理可用到省份-城市,洲-国家等级联,即通过不同的首选择,自动找到属于第一选择的二次可选项。

      test.jsp

<%@ page language="java" contentType="text/html; charset=gb2312" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>级联</title>
	  <script type="text/javascript" src="js/selectMajor.js"></script>
  </head>
<body>
<div>
     <form action="./reader/Personinfo_showgo.jsp" name="form" method="post">
					  学院:
						<select name="readerSchool" id="readerSchool" onChange="changeMajor()">
						    <option>--请选择学院--</option>
						    <option value="1">通信与信息工程学院</option>
						    <option value="2">光电工程学院</option>
						    <option value="3">经济管理学院</option>
						    <option value="4">计算机科学与技术学院</option>
						    <option value="5">外国语学院</option>
						    <option value="6">生物信息学院</option>
						    <option value="7">法学院</option>
						    <option value="8">自动化学院</option>
						    <option value="9">体育学院</option>
						    <option value="10">数理学院</option>
						    <option value="11">传媒艺术学院</option>
						    <option value="12">软件学院</option>
						    <option value="13">国际半导体学院</option>
						    <option value="14">国际学院</option>
						    <option value="15">研究生院</option>
						</select>
					   专业:
                         <select name="readerMajor" id="readerMajor" onChange="myfun1()">
                             <option>--请选择专业--</option>
                         </select>	
			</form>	
			</div>
	</body>
</html>

selectMajor.js

function changeMajor(){
	  //JS中的数组可以采用标识符代替
	  //根据用户选择的value值,与数组下标比较,从而找出学院对应的专业
	  
	  var school=document.form.readerSchool.value;
	  var majorList=new Array();
	  majorList['1']=['通信工程','电子信息工程','信息工程','广播电视工程','通信与信息类','通信与信息类实验班','通信学院卓越工程师班','通信学院IT精英班','通信学院国际实验班','电子信息工程(通信技术)','电子信息工程(应用电子技术)','电子信息工程(实验班)'];
      majorList['2']=['光信息科学与技术','电子科学与技术','电磁场与无线技术','电子工程类','电子工程实验班'];
      majorList['3']=['信息管理与信息系统','会计学','经济学','市场营销','工商管理','电子商务','工程管理','信息管理类','工商管理类','物流管理','国际化会计人才培养实验班','工商管理实验班','经济学实验班','市场营销专业实验班'];
      majorList['4']=['计算机科学与技术','地理信息系统','网络工程','信息安全','智能科学与技术','计算机智能科学类','计算机智能科学类实验班','计算机科学与技术(计算机应用)','计算机科学与技术(网络技术)','计算机科学与技术(信息安全)','计算机科学与技术(实验班)'];
      majorList['5']=['英语','英语类','英语(商贸)'];
      majorList['6']=['生物医药工程','生物技术','制药工程','生物信息学','生物技术与制药类','生物技术(生物信息学方向)','生物制药类实验班'];
      majorList['7']=['法学','知识产权学','法学类'];
      majorList['8']=['自动化','测控技术与仪器','电气工程与自动化','机械设计制造及其自动化','物联网工程','自动化与电气工程类','自动化与电气工程类实验班','自动化学院卓越工程师班','电气工程与自动化(电气技术)','电气工程与自动化(电机电器)','电气工程与自动化(实验班)'];
      majorList['9']=['社会体育'];
      majorList['10']=['应用物理学','信息与计算科学','数学与应用数学','信息显示与光电技术','数理科学与信息技术类','数理科学与信息技术基础班','信息与计算科学专业实验班'];
      majorList['11']=['广播电视编导','动画','环境设计','视觉传达','艺术设计(网络)','艺术设计类','编导改革实验班'];
      majorList['12']=['软件工程','软件工程(2年)','英语+软件','日语+软件','软件工程类'];
      majorList['13']=['电子科学与技术','微电子学','集成电路工程类','集成电路工程类实验班','微电子科学与工程实验班'];
      majorList['14']=['英语(中加)'];
      majorList['15']=['通信与信息工程','电子与信息工程','计算机科学与技术','计算机技术','软件工程','先进制造技术'];
      
      document.form.readerMajor.options.length=0;
      //根据学院下拉框的值,获取对应数组的索引标识
      var pIndex=document.form.readerSchool.value;
      var newOption;
      document.form.readerMajor.options.length=0;//清除选项
      //数组的读取和数字索引方式相同	
      for(var j in majorList[pIndex])
      {
          newOption=new Option(majorList[pIndex][j],majorList[pIndex][j]);
          document.form.readerMajor.options.add(newOption);//动态添加选项
      }
}

----------------------------------------------------hi,我是华丽丽的分割线-------------------------------------------------------

欢迎交流,尊重原创,转载请注明出处哦~


jsp+js实现二级级联

标签:级联   城市   省份   专业   学院   

原文地址:http://blog.csdn.net/u013159040/article/details/46128285

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!