一，效果需求：

当鼠标点击文本框或者标签后焦点移动到文本框时，弹出一个新的窗口，里面为多选框，然后还有查询和添加按钮，点击添加能添加内容，同时，在文本框中显示多选框的选择结果

二，部分代码展示：

1.由于是在添加内容模块弹出面板，所以要在form.jsp文件中给文本框添加焦点事件;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<%@ 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>

/ 小白一个，仅留做自我学习记忆，时常修改，有不对不全之处还望不吝赐教！ /