BootStrap穿梭框

最新推荐文章于 2022-09-06 10:07:58 发布

时不我待、

最新推荐文章于 2022-09-06 10:07:58 发布

阅读量4.9k

点赞数 1

分类专栏： css 文章标签： bootstrap 穿梭框

本文链接：https://blog.csdn.net/WXN069/article/details/93048022

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%--
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="../bootstorp/css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../bootstorp/js/bootstrap.js"></script>
</head>
<body>
<script>
    $(function(){
        var j_all_area = $("#sel_all_area"), j_selected_areas = $("#sel_selected_areas");
        $("#btn_select_all_area").click(function(){
            var selectedAreaArray = [];
            j_all_area.find("option").each(function(i){
                selectedAreaArray[i] = $(this).val();
                $(this).appendTo(j_selected_areas);
            });
            doSubmit('add',selectedAreaArray.toString());
            return false;
        });
        $("#btn_choose_selected_area").click(function(){
            var selectedAreaArray = [];
            j_all_area.find("option:selected").each(function(i){
                selectedAreaArray[i] = $(this).val();
                $(this).appendTo(j_selected_areas);
            });
            doSubmit('add',selectedAreaArray.toString());
            return false;
        });
        $("#btn_remove_selected_area").click(function(){
            var selectedAreaArray = [];
            j_selected_areas.find("option:selected").each(function(i){
                selectedAreaArray[i] = $(this).val();
                 $(this).appendTo(j_all_area);
            });
            doSubmit('del',selectedAreaArray.toString());
            return false;
        });
        $("#btn_remove_all_area").click(function(){
            var selectedAreaArray = [];
            j_selected_areas.find("option").each(function(i){
                selectedAreaArray[i] = $(this).val();
                 $(this).appendTo(j_all_area);
            });
            doSubmit('del',selectedAreaArray.toString());
            return false;
        });

    })

    function doSubmit(select_type,roleids){
        var userid = $("#userid").val();
        $.post("doroledefine",{userid:userid,roleids:roleids,type:select_type},function(result){
            if (result == "error") {
                layer.msg('更新失败！', {
                    icon: 2
                })
            }else{
                initParams();
                layer.msg('更新成功！', {
                    icon: 1
                })
            }
        });
    }

</script>

<fieldset>
    <input type="hidden" name="userid" value="${userid }" id="userid"/>
    <table class="table table-bordered dchannel-table">
        <tbody>
        <tr class="item-default">
            <td align="right" style="width: 50%;">
                <select id="sel_all_area" multiple="multiple" size="10" style="width:100%;">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </td>
            <td style="width: 50px;" valign="middle">
                <button type="button" class="btn btn-default btn-small" id="btn_select_all_area"><span class="glyphicon glyphicon-forward"></span></button>
                <button type="button" class="btn btn-default btn-small" id="btn_choose_selected_area"><span class="glyphicon glyphicon-chevron-right"></span></button>
                <button type="button" class="btn btn-default btn-small" id="btn_remove_selected_area"><span class="glyphicon glyphicon-chevron-left"></span></button>
                <button type="button" class="btn btn-default btn-small" id="btn_remove_all_area"><span class="glyphicon glyphicon-backward"></span></button>
            </td>
            <td style="width: 50%;">
                <select id="sel_selected_areas"  multiple="multiple" size="10" style="width:100%;">
                
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</fieldset>
</body>
</html>