说明

实现下面穿梭框功能

html

<select id="left" multiple class="csk">
    <option value="java">java</option>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="js">js</option>
</select>
<button id="rightToLeft"><<</button>
<button id="leftToRight">>></button>

<select id="right" multiple class="csk">
</select>

css

<style>
    .csk{
        min-width: 100px;
        min-height: 200px;
    }
</style>

JavaScript

引入js：

<script src="js/jquery-1.11.0.min.js"></script>

js代码：

<script>
    function init (){
        // on 相当于 addEventListener("事件类型",回调函数)
        $("#leftToRight").on("click",function(){
            // 选中 id 是left，子元素是option标签，并且是选中的
            let $op = $("#left option:selected")
            console.log( $op   )
            // 追加到id是right的里面
            $("#right").append(  $op   )
        })

        $("#rightToLeft").on("click",function(){
            // 选中 id 是left，子元素是option标签，并且是选中的
            let $op = $("#right option:selected")
            console.log( $op   )
            // 追加到id是right控件的里面
            $("#left").append(  $op   )
        })
    }
    $(document).ready(init)
</script>