67,513
社区成员
发帖
与我相关
我的任务
分享急！如何实现复选框的动态级联效果啊？
急！如何实现复选框的动态级联效果啊？
注，所有选项都是从数据库里动态读出来的！
点击某个元素（如按钮等），界面弹出一个层，显示大类的所有选项，然后当某个大类被选时，就显示出该大类选项的所有子选项，最后点击这个层上的确定按钮，就可把这个层上的被选上的选项的值赋给页面内的某个(或某几个)元素（如文本框等）。
效果类似于中华英才网chinahr的职业类别选项，http://www.chinahr.com/index.htm
注，所有选项都是从数据库里动态读出来的！
小弟先谢过了！
注，所有选项都是从数据库里动态读出来的！
点击某个元素（如按钮等），界面弹出一个层，显示大类的所有选项，然后当某个大类被选时，就显示出该大类选项的所有子选项，最后点击这个层上的确定按钮，就可把这个层上的被选上的选项的值赋给页面内的某个(或某几个)元素（如文本框等）。
效果类似于中华英才网chinahr的职业类别选项，http://www.chinahr.com/index.htm
注，所有选项都是从数据库里动态读出来的！
小弟先谢过了！
...全文
请发表友善的回复…
发表回复
zzmayim 2012-07-09
- 打赏
- 举报
[Quote=引用 15 楼 的回复:]
看我blog，有一篇实现省市二级联动的原码，你可以拿去开源。
思路：1、第一个select的change事件触发js，js里面使用ajax把参数传到action，
2、action调用底层的东西去数据库查询，得到你先要的第二层的东西，如果是集合类型把里面的内容通过特殊符号隔离包装成string类型，然后通过流传回到页面
3、页面使用js来解析返回的这个string，通过特殊符号来分割……
[/Quote]
如果是复选这个方法就很麻烦了
看我blog，有一篇实现省市二级联动的原码，你可以拿去开源。
思路：1、第一个select的change事件触发js，js里面使用ajax把参数传到action，
2、action调用底层的东西去数据库查询，得到你先要的第二层的东西，如果是集合类型把里面的内容通过特殊符号隔离包装成string类型，然后通过流传回到页面
3、页面使用js来解析返回的这个string，通过特殊符号来分割……
[/Quote]
如果是复选这个方法就很麻烦了
CYW1990 2010-08-26
- 打赏
- 举报
<%@ page language="java" import="java.util.*" pageEncoding="GBK" errorPage=""%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>省市级联</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
if('<%=request.getParameter("pid") %>'=='null')
{
window.location = "SelectCity2Servlet?province2=0";
}
function change(selectedId, targetId)
{
window.location = "SelectCity2Servlet?province2=" + selectedId;
}
</script>
</head>
<c:set var="pid" value="<%=request.getParameter("pid") %>"></c:set>
<body>
<br>
示例2：
<br>
<form name="form1" method="post" action="">${pid}
<select name="province2" onChange="change(this.value, 'city2');">
<c:if test="${pid!=null }">
<option value="请选择">－请选择－</option>
<c:forEach var="province" items="${provinceList }">
<option value="${province.pid } " <c:if test="${province.pid} == ${pid}">checked</c:if> >${province.pname }</option>
</c:forEach>
</c:if>
</select>
省
<select name="city2">
<option value="请选择">－请选择－</option>
<c:set var="cityList" value="${sessionScope.cityList}"></c:set>
<c:if test="${cityList!=null }">
<c:forEach var="city" items="${cityList }">
<option value="${city.id}">${city.cname }</option>
</c:forEach>
</c:if>
</select>
市
</form>
</body>
</html>
这种 第一个下来列表选了之后 值没有显示出来 第二个依然可以选择第一个框选中的子项
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>省市级联</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
if('<%=request.getParameter("pid") %>'=='null')
{
window.location = "SelectCity2Servlet?province2=0";
}
function change(selectedId, targetId)
{
window.location = "SelectCity2Servlet?province2=" + selectedId;
}
</script>
</head>
<c:set var="pid" value="<%=request.getParameter("pid") %>"></c:set>
<body>
<br>
示例2：
<br>
<form name="form1" method="post" action="">${pid}
<select name="province2" onChange="change(this.value, 'city2');">
<c:if test="${pid!=null }">
<option value="请选择">－请选择－</option>
<c:forEach var="province" items="${provinceList }">
<option value="${province.pid } " <c:if test="${province.pid} == ${pid}">checked</c:if> >${province.pname }</option>
</c:forEach>
</c:if>
</select>
省
<select name="city2">
<option value="请选择">－请选择－</option>
<c:set var="cityList" value="${sessionScope.cityList}"></c:set>
<c:if test="${cityList!=null }">
<c:forEach var="city" items="${cityList }">
<option value="${city.id}">${city.cname }</option>
</c:forEach>
</c:if>
</select>
市
</form>
</body>
</html>
这种 第一个下来列表选了之后 值没有显示出来 第二个依然可以选择第一个框选中的子项
CYW1990 2010-08-26
- 打赏
- 举报
显示在下拉列表框
CYW1990 2010-08-26
- 打赏
- 举报
怎样获取第一个下来列表的值 显示出来
shen1863 2009-11-27
- 打赏
- 举报
AJAX
v05120s 2009-11-27
- 打赏
- 举报
使用ajax完全可以做到，我在公司项目中就是用ajax去做的!
myeclipse0123 2009-11-27
- 打赏
- 举报
这种在google一下很多的
chen7788 2009-11-27
- 打赏
- 举报
Ajax 和 js 同样都可以实现
xiaoyi3317 2009-11-26
- 打赏
- 举报
下拉框和复选框有区别吗？晕。。实现的方法都差不多的呀
道光2008 2009-11-26
- 打赏
- 举报
那就是带checkbox的tree嘛，（dtree,mizztree都有实现）上网找个列子改改
a175611198 2009-11-26
- 打赏
- 举报
用ajax啊~拼出结果后用javascript 分离
mxx123 2009-11-26
- 打赏
- 举报
那像有的网站里的职位选择后，把选择的职位以一个标签显示一个选项（每个选项都有一个删除按钮，来删除这个标签）那种，是怎么实现的啊？
牛麦康纳 2009-11-26
- 打赏
- 举报
看我blog，有一篇实现省市二级联动的原码，你可以拿去开源。
思路：1、第一个select的change事件触发js，js里面使用ajax把参数传到action，
2、action调用底层的东西去数据库查询，得到你先要的第二层的东西，如果是集合类型把里面的内容通过特殊符号隔离包装成string类型，然后通过流传回到页面
3、页面使用js来解析返回的这个string，通过特殊符号来分割，然后形成下一个select里面的内容。
主要用到的技术：js,ajax,流技术
思路：1、第一个select的change事件触发js，js里面使用ajax把参数传到action，
2、action调用底层的东西去数据库查询，得到你先要的第二层的东西，如果是集合类型把里面的内容通过特殊符号隔离包装成string类型，然后通过流传回到页面
3、页面使用js来解析返回的这个string，通过特殊符号来分割，然后形成下一个select里面的内容。
主要用到的技术：js,ajax,流技术
卿文刚 2009-11-25
- 打赏
- 举报
使用Ajax
mxx123 2009-11-25
- 打赏
- 举报
小弟很菜的！希望大侠们能提供下完整代码啊！
youjianbo_han_87 2009-11-24
- 打赏
- 举报
我博客上有个类似于 开心网选择好友的例子，和你的要求差不多。你copy过去，改改，把写死的数据，改成js参数获得。将那个 html改成一个 js对象即可。
youjianbo_han_87 2009-11-24
- 打赏
- 举报
他说我回复内容过长
lin364653705 2009-11-24
- 打赏
- 举报
这种网上很多啊，好多都实现了你这样的效果。看下这个嘛，都是从数据库读取。。
http://blog.csdn.net/Rainpoem/archive/2006/03/28/641624.aspx
http://blog.csdn.net/Rainpoem/archive/2006/03/28/641624.aspx
liguominz 2009-11-24
- 打赏
- 举报
1楼的代码不错
而且你要实现那个只需要改一下就可以了
把下拉列表改成复选框就OK了~
而且你要实现那个只需要改一下就可以了
把下拉列表改成复选框就OK了~
bingliang008 2009-11-24
- 打赏
- 举报
[Quote=引用楼主 mxx123 的回复:]
急！如何实现复选框的动态级联效果啊？
注，所有选项都是从数据库里动态读出来的！
点击某个元素（如按钮等），界面弹出一个层，显示大类的所有选项，然后当某个大类被选时，就显示出该大类选项的所有子选项，最后点击这个层上的确定按钮，就可把这个层上的被选上的选项的值赋给页面内的某个(或某几个)元素（如文本框等）。
效果类似于中华英才网chinahr的职业类别选项，http://www.chinahr.com/index.htm
注，所有选项都是从数据库里动态读出来的！
小弟先谢过了！
[/Quote]你说的这个说白了就是打开DIV，然后返回所选项目。你是不会写还是不知道思路啊？
急！如何实现复选框的动态级联效果啊？
注，所有选项都是从数据库里动态读出来的！
点击某个元素（如按钮等），界面弹出一个层，显示大类的所有选项，然后当某个大类被选时，就显示出该大类选项的所有子选项，最后点击这个层上的确定按钮，就可把这个层上的被选上的选项的值赋给页面内的某个(或某几个)元素（如文本框等）。
效果类似于中华英才网chinahr的职业类别选项，http://www.chinahr.com/index.htm
注，所有选项都是从数据库里动态读出来的！
小弟先谢过了！
[/Quote]你说的这个说白了就是打开DIV，然后返回所选项目。你是不会写还是不知道思路啊？
加载更多回复（4）
