两个CHECKBOX，根据前一个的选择，自动改变后面checkbox选项内容

刚开始加载页面的时候，使用$.ajax载入医院A和医院B。然后通过onchange时间加载对i应的科室

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%
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>My JSP 'MyJsp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<%
  /*
   级联菜单形式，最好由ajax做，那样页面显示的更友好，现在使用javascript演示
   已经测试通过，具体操作请按情况区别。

  */

  /*-------------------------Method----------------------------*/

  /*第一级菜单封装成Map集合，方便页面取值*/
  Map<String,String> mapOne = new HashMap<String,String>();
  mapOne.put("A","A");
  mapOne.put("B","B");
%>


<script type="text/javascript">
  /*声明两个数组，以便区别，具体操作，应该是通过底层返回一个list*/
  var one = new Array("a","b","c");
  var two = new Array("d","e","f");  /*该函数，控制二级级联操作*/
  function specieSelChange(selBox)
  {
   /*
    这些数据需要重数据库中取，我没有连接数据库，所以自己拟定数据，数据封装根据具体情况而定
    这是第二级菜单，需要级联的菜单
   */
   var str = "<select>";
   if(selBox.value == "A")
   {
    for(var i = 0; i < one.length; i ++)
    {
     str += "<option>" + one[i] + "</option>";
    }
   }
   else if(selBox.value == "B")
   {
    for(var i = 0; i < two.length; i ++)
    {
     str += "<option>" + two[i] + "</option>";
    }
   }
   str += "</select>";
   document.all('Linkage').innerHTML = str;
  }
</script>

  </head>

  <body>

    
    <table border="0" align="center" style="font-size: 12px;">
     <tr>
      <td>请选择种类:</td>
      <td>
       
       <select id="SpecieSel" onchange="specieSelChange(this)">
       <%
        Iterator it = mapOne.entrySet().iterator();
        while(it.hasNext()){
         Map.Entry entry = (Map.Entry)it.next();
       %>
         <option value="<%=(String)entry.getKey() %>">
          <%=(String)entry.getValue() %>
         </option>
       <%} %>
       </select>
      </td>
     </tr>
     
     <tr>
      <td>
       二级联动下拉框:
      </td>
      <td id="Linkage">
       
       <select>
        <option>---请选择---</option>
       </select>
      </td>
     </tr>
    </table>
  </body>
</html>
<div>
<div>医院：</div>
<div>
<input type="checkbox" onclick="toggleOffice('A')" /> A
<input type="checkbox" onclick="toggleOffice('B')" /> B
</div>
</div>
<div>
<div>科室：</div>
<div style="display:none" rel="A">
<input type="checkbox" /> a
<input type="checkbox" /> b
<input type="checkbox" /> c
</div>
<div style="display:none" rel="B">
<input type="checkbox" /> d
<input type="checkbox" /> e
<input type="checkbox" /> f
</div>
</div><script type="text/javascript">

</script>
<!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>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<div>
    <div>医院：</div>
    <div>
        <input id="cka" type="checkbox" onclick="toggleOffice('A')" /> A
        <input id="ckb" type="checkbox" onclick="toggleOffice('B')" /> B
    </div>
</div>
<div>
    <div>科室：</div>
    <div style="display:none" rel="A">
        <input type="checkbox" /> a
        <input type="checkbox" /> b
        <input type="checkbox" /> c
    </div>
    <div style="display:none" rel="B">
        <input type="checkbox" /> d
        <input type="checkbox" /> e
        <input type="checkbox" /> f
    </div>
</div>

<script type="text/javascript">

</script>
</body>
</html>
我倒是觉得楼主可能是想弄一个option样的东西  而不是一个checkbox 。其实思路都很简单  就是在第一个checkbox上添加js函数，然后通过执行这个函数  判断你选择了A还是选择B    之后根据这个判断的结果   设置第二个checkbox中的内容 (如果需要从数据库查数据  比如这些科室内容是从数据库中获取的   那就动态创建一些checkbox)
学FLASH吧。这年代编程再关注这些UI操作写怎么多代码解决个小问题，是倒退
的确是要做个option类型的东西，最近页面写太多了都搞混了
还不至于用ajax，的确是用option和js能解决，不过我js很不好，看来还要再研究一下
~谢谢大家。没有给分的童鞋#1楼是因为我觉得这么小的功能没必要用ajax做~~~，而且ajax会明显出现动态刷新，效果不太好。
#3和#4楼在数据库动态执行的情况用，用穷举法是不可行的。再次感谢！
#4 @gua84607583，
您的回复是正解，但尚有一点美中不足。就是当用户点击A后，显示了a、b、c，假如用户勾选了其中某项，当他点击B后，虽然a、b、c 隐藏了，但仍然保留了勾选（用户也许希望是清空它才对）。如果把这个细节也解决了的话，就是完美的代码了。