当前位置:asp编程网>技术教程>Javascript教程>  正文

jquery实现下拉框选项左右、上下、双击移动效果

2019-06-17 08:20:14   来源:www.aspbc.com   作者:wangsdong   浏览量:487   收藏
<form action="a.asp" method="post" id="theForm">
    <table width="400" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="120" height="242">
                    <select name="a1" id="a1" size="10" multiple="multiple">
                        <option value="1|课程1">课程1</option>
                        <option value="2|课程2">课程2</option>
                        <option value="3|课程3">课程3</option>
                        <option value="4|课程4">课程4</option>
                        <option value="5|课程5">课程5</option>
                        <option value="6|课程6">课程6</option>
                        <option value="7|课程7">课程7</option>
                        <option value="8|课程8">课程8</option>
                        <option value="9|课程9">课程9</option>
                        <option value="10|课程10">课程10</option>
                    </select>
                </td>
                <td width="120" align="center">
                    <input class="btn" type="button" name="Submit" id="add" value=">"><br />
                    <input class="btn" type="button" name="Submit2" id="del" value="<"><br />
                    <input class="btn" type="button" name="Submit" id="add2" value=">>"><br />
                    <input class="btn" type="button" name="Submit2" id="del2" value="<<"><br />
                </td>
                <td width="171">
                    <select name="a2" id="a2" size="10" multiple="multiple"></select>
                </td>
                <td><input type="button" value="上移" id="up" /><br /><input type="button" value="下移" id="down" /></td>
            </tr>
        <tr><td colspan="4"><input type="submit" value="提交" id="btn"></td></tr>
    </table>
   <script src="jquery.min.js"></script>
    <script>
        /*
        jquery实现下拉框选项左右、上下、双击移动效果
        来源:www.aspbc.com
        作者:wangsdong
        原创文章,转载请注明来源“asp编程网”,谢谢
        */
        $(function(){
           /*移动多个*/
           $("#add").click(function(){
               adds();
           });

            /*移动全部*/
            $("#add2").click(function(){
                $("#a1 option").prop("selected", 'selected');
                adds();
            });

            /*删除多个*/
            $("#del").click(function(){
                dels();
            });

            /*删除全部*/
            $("#del2").click(function(){
                $("#a2 option").prop("selected", 'selected');
                dels();
            });

            /*上移*/
            $("#up").click(function(){
                ups();
            });

            /*下移*/
            $("#down").click(function(){
                downs();
            })

            /*提交*/
            $("#btn").click(function(){
                if($("#a2>option").length > 0){
                    $("#a2 option").prop("selected", 'selected');
                }else{
                    alert('请选择要提交的课程');
                    return false;
                }
            });

            //双击功能
            $("#a1").on('dblclick','option',function(){
                $(this).prop("selected", 'selected');
                adds();
            });

            $("#a2").on('dblclick','option',function(){
                $(this).prop("selected", 'selected');
                dels();
            });
        });

        function adds(){
            if($("#a1>option:selected").length > 0){
                var optionlist = $("#a1>option:selected");
                for(i=0;i<optionlist.length;i++){
                    v = optionlist[i].value;
                    t = optionlist[i].text;
                    str = "<option value='"+v+"' selected>"+t+"</option>";
                    $("#a2").append(str);
                    optionlist[i].remove();
                }
            }
            else{
                alert('请选择要添加的课程');
                return false;
            }
        }

        function dels(){
            if($("#a2>option:selected").length > 0){
                var optionlist = $("#a2>option:selected");
                for(i=0;i<optionlist.length;i++){
                    v = optionlist[i].value;
                    t = optionlist[i].text;
                    str = "<option value='"+v+"' selected>"+t+"</option>";
                    $("#a1").append(str);
                    optionlist[i].remove();
                }
            }
            else{
                alert('请选择要删除的课程');
                return false;
            }
        }

        function ups(){
            if($("#a2>option:selected").length > 0){
                if($("#a2>option:selected").length == 1) {
                    $('#a2 option:selected').insertBefore($('#a2 option:selected').prev('option'));
                }else{
                    alert('请选择一个课程向上移动');
                    return false;
                }
            }
            else{
                alert('请选择要移动的课程');
                return false;
            }
        }

        function downs(){
            if($("#a2>option:selected").length > 0){
                if($("#a2>option:selected").length == 1) {
                    $('#a2 option:selected').insertAfter($('#a2 option:selected').next('option'));
                }else{
                    alert('请选择一个课程向下移动');
                    return false;
                }
            }
            else{
                alert('请选择要移动的课程');
                return false;
            }
        }

    </script>
</form>

上一篇: 总结jquery中attr()和prop()的区别?

下一篇: 无

关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网