一，效果需求：
| |
当鼠标点击文本框或者标签后焦点移动到文本框时，弹出一个新的窗口，里面为多选框，然后还有查询和添加按钮，点击添加能添加内容，同时，在文本框中显示多选框的选择结果 |
| |
|
二，部分代码展示：
1.由于是在添加内容模块弹出面板，所以要在form.jsp文件中给文本框添加焦点事件;
<div class="control-group">
<label class="control-label">研究方向：</label>
<div class="controls">
<form:input path="researchname" id="researchname" onfocus="choseResearchList()" htmlEscape="false" maxlength="64" class="input-xlarge required"/>
<span class="help-inline"><font color="red">*</font> </span>
<script type="text/javascript">
//定义数组用于保存复选框选中的结果
var researchSelect = [];
//将复选框的结果存入数组
function researchSelectAddOrDel(id,researchname) {
//定义标志变量，用于确定复选框是否选中
var isExtents = false, index = 0;
for (var i=0; i<researchSelect.length; i++){
if (researchSelect[i][1]==researchname){
//如果数组中已有选中的结果，标志为true
isExtents = true;
index = i;
}
}
if(isExtents){
//标志为true，即数组中已有，就删除原来的，然后把现在选中的加进去
researchSelect.splice(index,1);
}else{
//标志为false，即数组中没有选中的结果，就把它加入数组
researchSelect.push([id,researchname]);
}
//每次更改就需要调用更新方法
researchSelectRefresh();
}
//researchName字符串更新（即文本框内容更新）
function researchSelectRefresh(){
var researchName = "";
var researchDataRelation = "";
//提取research添加到researchName后面（即把数组内容用逗号隔开，合并成一个字符串）
for (var i=0; i<researchSelect.length; i++){
researchName += researchSelect[i][1] + ",";
researchDataRelation += researchSelect[i][0] + ",";
}
//删除合并字符串researchName的最后一个逗号
researchName = researchName.substr(0, researchName.length - 1);
//由于第一次需要也会执行，此时数组为空，所以合并字符串中第一个位置为空，后面跟的逗号需要删除，否则合并字符串首位就有逗号
if(researchName.indexOf(",") == 0){
researchName = researchName.substr(1);
}
//把最后拼接所得的researchName字符串值传递给表单数据researchname
$("#researchname").val(researchName);
$("#researchDataRelation").val(researchDataRelation);
}
//把researchName字符串分割成数组，以便在弹出的selectList面板中对比，已有的自动勾选
var temp = $("#researchname").val().split(",");
for(var i = 0 ; i < temp.length ; i++){
//把分割完成的数组顺序放入researchSelect数组
researchSelect.push([i,temp[i]]);
}
//弹出研究方向选择面板
function choseResearchList(){
//由于是弹出的面板，所以要自己写一个jsp
top.$.jBox.open("iframe:${ctx}/gsmis/research/selectList?pageSize=8", "添加研究方向",$(top.document).width()-700,$(top.document).height()-165,{
buttons:{"确定":true},
loaded:function(h){
$(".jbox-content", top.document).css("overflow-y","hidden");
}
});
};
</script>
</div>
</div>2.弹出面板的JSP
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="decorator" content="default"/>
<title>研究方向选择</title>
<script type="text/javascript">
$(document).ready(function() {
$("input[name=id]").each(function(){
//定义变量（其实就是主面板的数组）用于接收主面板的文本框的传值
var researchSelect = null;
//判断复面板（即弹出的面板）传值
if (top.mainFrame.cmsMainFrame){
//如果复面板有值存在，就把它的值重新赋给researchSelect，即researchSelect自我更新
researchSelect = top.mainFrame.cmsMainFrame.researchSelect;
}else{
//否则就把主面板的值赋给researchSelect
researchSelect = top.mainFrame.researchSelect;
}
//遍历researchSelect，如果文本框中存在复选框的值，就勾选它
for (var i=0; i<researchSelect.length; i++){
if (researchSelect[i][1]==$(this).attr("title")){
this.checked = true;
}
}
//点击确定按钮返回复面板的值
$(this).click(function(){
var id = $(this).val(), name = $(this).attr("title");
if (top.mainFrame.cmsMainFrame){
top.mainFrame.cmsMainFrame.researchSelectAddOrDel(id, name);
}else{
top.mainFrame.researchSelectAddOrDel(id, name);
}
});
});
});
function page(n,s){
$("#pageNo").val(n);
$("#pageSize").val(s);
$("#searchForm").submit();
return false;
}
function addNewResearch() {
top.$.jBox.open("iframe:${ctx}/gsmis/research/form", "新增研究方向",$(top.document).width()-700,$(top.document).height()-165,{
buttons:{"确定":true},
loaded:function(h){
$(".jbox-content", top.document).css("overflow-y","hidden");
}
});
}
</script>
</head>
<body>
<div style="margin:10px;">
<form:form id="searchForm" modelAttribute="research" action="${ctx}/gsmis/research/selectList" method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
<li><label>研究方向：</label>
<form:input path="name" htmlEscape="false" maxlength="50" class="input-small"/>
</li>
<li class="btns">
<input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/>
<input id="btnSubmit" class="btn btn-primary" type="submit" onclick="addNewResearch()" value="添加" />
</li>
<li class="clearfix"></li>
</ul>
</form:form>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead><tr>
<th style="text-align:center;">选择</th>
<th>研究方向</th>
</tr></thead>
<tbody>
<c:forEach items="${page.list}" var="research"><tr>
<td style="text-align:center;">
<input type="checkbox" name="id" value="${research.id}" title="${fns:abbr(research.name,40)}" />
</td>
<td id="researchlabel">${research.name}</td>
</tr></c:forEach>
</tbody>
</table>
<div class="pagination">${page}</div>
</div>
</body>
</html>/*小白一个，仅留做自我学习记忆，时常修改，有错的希望留言指正，不喜勿喷！*/