转载：（jQuery实现左移和右移）

Posted 2020-09-20 命

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了转载：（jQuery实现左移和右移）相关的知识，希望对你有一定的参考价值。

<html>
<head>
<meta charset="utf-8">
<title>完成左移右移</title>
<script src="jquery.js"></script>
<style type="text/css">
    table{background-color:purple;}
    input{background-color:blue;}
</style>
<script language="javascript">
    $("document").ready(function(){
        $("#b1").click(function(){
            var v1=$("#k1").find("option:selected").text();
            if(v1!=null){
                $("#k2").append("<option value=\'\'>"+v1+"</option>");
                $("#k1 option:selected").remove()
            }    
        });    
        
        $("#b2").click(function(){
            var v2=$("#k2").find("option:selected").text();
            if(v2!=null){
                $("#k1").append("<option value=\'\'>"+v2+"</option>");
                $("#k2 option:selected").remove();
            }
        });
    });
</script>    
</head>
<body>
<form action="#" method="post">
<table>
    <tr>
        <td>
            <select id="k1" size="10" style="width:200px;">
                <option id="p1">柠檬学院</option>
                <option id="p2">柠檬学员</option>
                <option id="p3">柠檬人</option>
            </select>
        </td>
        <td>
            <input type="button" id="b1" value=">>"/>
            <input type="button" id="b2" value="<<"/>        
        </td>
        <td>
            <select id="k2" size="10" style="width:200px;">
                <option>李哥</option>                
            </select>
        </td>
    </tr>
</table>
</form>    
</body>
</html>
</html>

<html>
<head>
<meta charset="utf-8">
<title>完成左移右移</title>
<script src="jquery.js"></script>
<style type="text/css">
    table{background-color:purple;}
    input{background-color:yellow;}
</style>
<script language="javascript">
    $(document).ready(function(){
        $("#b1").click(function(){
            $("#k2").append($("#k1 option:selected"));
        });
        
        $("#b2").click(function(){
            $("#k1").append($("#k2 option:selected"));
        });
        
        $("#b3").click(function(){
            $("#k2").append($("#k1 option"));
        });
        
        $("#b4").click(function(){
            $("#k1").append($("#k2 option"));
        });
        
        $("#add0").click(function(){
            var a=$("#add").val();
            $("#k1").append("<option value="+a+0+">"+a+"</option>");
            $("#add").val("");
        });
    });
</script>    
</head>
<body>
<form action="#" method="post">
<table>
    <tr>
        <td>
            <select id="k1" size="10" style="width:200px;">
                <option value="Ning1" id="p1">柠檬学院</option>
                <option value="Ning2" id="p2">柠檬学员</option>
                <option value="Ning3" id="p3">柠檬人</option>
            </select>
        </td>
        <td>
            <input type="button" id="b1" value=">>"/>
            <input type="button" id="b3" value="==>>"/><br/>
            <input type="button" id="b2" value="<<"/>
            <input type="button" id="b4" value="<<=="/>
                
        </td>
        <td>
            <select id="k2" value="Ning4" size="10" style="width:200px;">
                <option>李哥</option>                
            </select>
        </td>
    </tr>
</table>
</form>    
内容：<input type="text" id="add"/>
      <input type="button" value="添加" id="add0"/>


</body>
</html>

//移到右边
    $(\'#add\').click(function(){
        //获取选中的选项，删除并追加给对方
        $(\'#select1 option:selected\').appendTo(\'#select2\'); 
    });
     
    //移到左边
    $(\'#remove\').click(function(){
        $(\'#select2 option:selected\').appendTo(\'#select1\');
    });
     
    //全部移到右边
    $(\'#add_all\').click(function(){
        //获取全部的选项,删除并追加给对方
        $(\'#select1 option\').appendTo(\'#select2\');
    });
     
    //全部移到左边
    $(\'#remove_all\').click(function(){
        $(\'#select2 option\').appendTo(\'#select1\');
    });
     
    //双击选项
    $(\'#select1\').dblclick(function(){ //绑定双击事件
        //获取全部的选项,删除并追加给对方
        $("option:selected",this).appendTo(\'#select2\'); //追加给对方
    });
     
    //双击选项
    $(\'#select2\').dblclick(function(){
        $("option:selected",this).appendTo(\'#select1\');
    });

以上是关于转载：（jQuery实现左移和右移）的主要内容，如果未能解决你的问题，请参考以下文章

阿里10年测试大佬带你搞懂测试左移和右移

如果在一个表达式中同时使用左移和右移，为啥会有所不同？

测试左移和右移：不是左右逢源而是左右突击

如何计算位运算中的左移和右移