权限选择

权限选择

作者：李永健
撰写时间：2019年 1月20日
开发工具与关键技术： Jquery 、C#MVC
html中的代码：

<script src="~/Content/js/jquery-1.7.1.min.js"></script>

 <select id="selectLeft"multiple="multiple"> 
        <option>南沙</option>
        <option>广州</option>
        <option>深圳</option>
        <option>茂名</option>
    </select>
    <input type="button"id="btnRightAll"value=">>"/>
    <input type="button" id="btnRight" value=">" />
    <input type="button" id="btnLeft" value="<" />
    <input type="button" id="btnLeftAll" value="<<" />
    <select id="selectRight"multiple="multiple"></select>

view层的代码：

  $(function () {
            //为“全部右移”按钮绑定事件
            $("#btnRightAll").click(function () {
                //获取所有子元素，追加到右边的select中
                $("#selectLeft").children().appendTo("#selectRight");               
            });
            //为“选中右移”按钮判定事件
            $("#btnRight").click(function () {
                //获取到所有被选中的option
                $("#selectLeft :selected").appendTo("#selectRight");
            });
            //为“全部左移”按钮判定事件
            $("#btnLeftAll").click(function () {
                //获取右侧所有的option               
                $("#selectRight").children().appendTo("#selectLeft");
            });
                //为“选中左移”按钮判定事件
                $("#btnLeft").click(function () {
                    //获取右侧选中的项，加到左边
                    $("#selectLeft").append($("#selectRight :selected"));
                })
            })      

如下效果图：