选修课程的级联。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  </head>
   
  <body>
  <script language="javascript">
   
  function changeCity(){
  var cityList =new Array();
  cityList['第一学期']=['html','c#'];
  cityList['第二学期']=['sqlserver','Ado.net','Asp.net','xml'];
  cityList['第二学年']=['刘德华','李宇春','曾轶可'];
  var pIndex=document.form1.select1.value;
  var newOption1;
  document.form1.select2.options.length=0;
  for(var j in cityList[pIndex]){
  newOption1=new Option(cityList[pIndex][j],cityList[pIndex][j]);
  document.form1.select2.options.add(newOption1);
  }
  }
  </script>
  <form id="form1" name="form1" method="post" action="" >
  <table width="234" height="104" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td colspan="2"><div align="center">考试申请</div></td>
  </tr>
  <tr>
  <td width="76">学期</td>
  <td width="124"><label>
  <select name="select1" id="select1" onchange="changeCity()">
  <option value="">请选择学期</option>
  <option value="第一学期">第一学期</option>
  <option value="第二学期">第二学期</option>
  <option value="第二学年">第二学年</option>
  </select>
  </label></td>
  </tr>
  <tr>
  <td>课程</td>
  <td><label>
  <select name="select2" id="select2">
  <option>请选择课程</option>
  </select>
  </label></td>
  </tr>
  </table>
  </form>
  </body>
  </html>
 
原文地址:https://www.cnblogs.com/costa92/p/3740941.html