左边列表多选可以批量移动到右边列表，右边列表页可以批量移动到左边列表，可以实现前端自动搜索 ajax 传递List

#set($layout = "layout/null.vm")
<style type="text/css">
    li {
        list-style: none;
    }

    .select-content {
        float: right;
        height: 36px;
        line-height: 36px;
        margin-right: 305px;
        background: white;
        color: rgb(149, 149, 149);
         180px;
        position: relative;
        top: 50%;
        margin-top: -18px;
    }

    .down-drop {
        float: right;
        height: 36px;
        background: rgb(235, 235, 235);
    }

    .select-content .location {
        padding-left: 16px;
        float: left;
        height: 36px;
        padding-right: 14px;
    }

    .location img {
        margin-top: 9px;
    }

    .select-box {
        display: none;
    }

    .select-box ul li img {
        margin-left: 16px;
        margin-right: 14px;
    }

    .nav .select-content ul {
        position: relative;
        border: none;
        background: white;
        z-index: 1;
    }

    .select-box ul li {
        border-bottom: 1px solid rgb(216, 216, 216);
    }

    .select-box ul li:first-child {
        border-top: 1px solid rgb(216, 216, 216);
    }

    .selitem {
        font-size: 15px;
        margin-top: 5px;
    }

    .selitem li {
        margin-top: 5px;
        cursor: pointer;
    }

    .selitem input {
        margin-right: 5px;
    }
</style>
<script type="text/javascript">
    $(function () {

        //移到右边
        $('#add').click(function () {
            //获取选中的选项，删除并追加给对方
            //获取选中的选项，删除并追加给对方
            //alert(123);
            $("#select1 input:checkbox[name='loc']:checked").each(function () {
                $(this).prop("checked", false);
                $(this).parent().appendTo('#select2');
            });

            $('#select1 li:checkbox:checked').appendTo('#select2');
        });

        //移到左边
        $('#remove').click(function () {
            $("#select2 input:checkbox[name='loc']:checked").each(function () {
                $(this).parent().appendTo('#select1');
            });
        });

        // 左侧
        $("#input1").bind("change keyup paste ", function () {
            var val = $(this).val();
            // 遍历select1下的input实现自动搜索
            $("#select1 input:checkbox[name='loc']").each(function () {

                if (val == "") {
                    $(this).parent().show();
                }
                else {
                    var itemv = $(this).next();
                    if (itemv.text().indexOf(val) > -1) {
                        $(this).parent().show();
                    }
                    else {
                        $(this).parent().hide();
                    }
                    // console.log(itemv.text());
                }
            });

        })
        // 右侧
        $("#input2").bind("change keyup paste ", function () {
            var val = $(this).val();
            // 遍历select1下的input实现自动搜索
            $("#select2 input:checkbox[name='loc']").each(function () {
                if (val == "") {
                    $(this).parent().show();
                }
                else {
                    var itemv = $(this).next();
                    if (itemv.text().indexOf(val) > -1) {
                        $(this).parent().show();
                    }
                    else {
                        $(this).parent().hide();
                    }
                }
            });
        })

    });
</script>
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">
                #if($conStaticTemplate)商品静态模板更新
                #else 商品静态模板新增
                #end
            </h4>
        </div>
        <form id="conStaticTemplateEdit_form" method="post" class="form-horizontal bv-form" novalidate="novalidate">
            <input type="hidden" id="id" name="id" value="$!{conStaticTemplate.id}"/>
            <button type="submit" class="bv-hidden-submit" style="display: none;  0px; height: 0px;"></button>
            <div class="modal-body">
                <div class="row">

                    <div class="col-sm-10">
                        <div class="form-group has-feedback">
                            <label class="col-sm-4 control-label" style="padding-left: 0px;">模板名称</label>
                            <div class="col-sm-8" style="padding-left: 0px;">
                                <input class="form-control" id="temName" name="temName"
                                       value="$!{conStaticTemplate.temName}"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="padding-left: 10px;">
                    <div class="col-sm-5 panel-body panel panel-default" style=" 320px;">
                        <input type="search" id="input1" onchange="search1()" class="form-control">
                        <ul id="select1" style="height: 300px;overflow-y: auto;padding-left: 3px;" class="selitem">
                            #foreach( $item in $conSellerGoodsList)
                                <li onclick="testLi('$!{item.goodsNo}')">
                                    <input type="checkbox" name="loc" id="$!{item.goodsNo}"
                                           value="$!{item.goodsNo}"><span>$!{item.goodsName}</span></li>
                            #end
                        </ul>
                    </div>
                    <div class="col-sm-1" style="text-align: center;">
                        <div>
                            <div style="margin-top: 40px;margin-bottom: 20px;">
                                <span id="add"><input type="button" class="btn btn-primary" value=">>"/></span>
                            </div>
                            <div>
                                <span id="remove"><input type="button" class="btn btn-primary" value="<<"/></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5 panel-body panel panel-default" style=" 320px;">
                        <input type="search" id="input2" class="form-control">
                        <ul id="select2" style="height: 300px;overflow-y: auto;padding-left: 3px;" class="selitem">

                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="conStaticTemplate_sumbit222" type="button" class="btn btn-primary" onclick="saveStaticGoods()">
                    保存
                </button>
                <a href="#" class="btn btn-info" data-dismiss="modal">关闭</a>
            </div>
        </form>
    </div>
</div>
<script src="${assetModule}/static/script/conStaticTemplate/conStaticTemplateEdit.js"></script>
<script type="text/javascript">
    function testLi(id) {
        $("#" + id + "").prop("checked", !$("#" + id + "").prop('checked'));
    }

    // 保存静态模板商品
    function saveStaticGoods() {
        // 模板名称
        var temName = $("#temName").val();
        var arrayColumn =[];
        $("#select2 input:checkbox[name='loc']").each(function () {
            var itemv = $(this).val();
            arrayColumn.push(itemv);
        });
        console.log(arrayColumn);

        // 调用ajax
        jQuery.ajax({
            type: "post",
            url: "conStaticTemplate/saveStaticGoods.do",
            dataType: "json",
            data: {listGoods:arrayColumn,temName:temName},
            traditional: true,
            success: function (data) {
                console.log(data);
                if (data.resultCode == 1) {
                    alert("修改成功")
                } else {
                    alert("修改失败")
                }
                return true;
            }
        });
    }
</script>

后台

@RequestMapping(value = "/saveStaticGoods.do")
public @ResponseBody
Object saveStaticGoods(HttpServletRequest request, String[] listGoods, String temName) {
    List<String> lsitBoxGoods = Arrays.asList(listGoods);
    System.out.println(temName);
    return "";
}