两个CHECKBOX，依据前一个的选择，自动改变后面checkbox选项内容
日期：2014-05-16 浏览次数：20417 次
两个CHECKBOX，根据前一个的选择，自动改变后面checkbox选项内容
比如这样一个场景：
医院A：科室a，科室b，科室c
医院B：科室d，科室e，科室f
checkbox内容：
第一个checkbox， 选择医院： A 或者B
第二个checkbox，根据选择的医院A或B显示对应的科室。
如： 第一个checkbox选择A，则在第二个CHECKBOX列表里显示选项a,b,c
第一个checkbox选择b，则在第二个CHECKBOX列表里显示选项d,e,f
现在觉得没什么思路，能提供一些思路么~~
------解决方案--------------------
<%@ 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");
%>
<!-- 该javascript用来生成二级联动菜单 -->
<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>
<!-- 页面开始解析数据 首先是第一个下拉框-->
&nb
比如这样一个场景：
医院A：科室a，科室b，科室c
医院B：科室d，科室e，科室f
checkbox内容：
第一个checkbox， 选择医院： A 或者B
第二个checkbox，根据选择的医院A或B显示对应的科室。
如： 第一个checkbox选择A，则在第二个CHECKBOX列表里显示选项a,b,c
第一个checkbox选择b，则在第二个CHECKBOX列表里显示选项d,e,f
现在觉得没什么思路，能提供一些思路么~~
------解决方案--------------------
<%@ 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");
%>
<!-- 该javascript用来生成二级联动菜单 -->
<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>
<!-- 页面开始解析数据 首先是第一个下拉框-->
&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
