jquery select选择框双向

html代码：、

<div class="row ui-simple-list ">
    <div class="sel">
        <h2><span class="havechosen">未选择</span><span class="nochoice">已选择</span></h2>
        <select multiple="multiple" size="10" name="havechosen" id="havechosen" style="height:400px;">
            <?php foreach($data as $key=>$val): ?>
                <option value="<?php echo $val['sto_id']; ?>,<?php echo $val['roleId']; ?>"><?php echo $val['roleName']; ?></option>
            <?php endforeach; ?>
        </select>
        <div class="btn-z">
            <button id="movebtn">==></button>
            <button class="btn-2" id="removebtn"><==</button>
        </div>
        <select multiple="multiple" size="10" name="nochoice" id="nochoice" style="height:400px;">

        </select>
    </div>
    <div class="row  " id='putbutton'>
        <button class="button button-primary put ">确认</button>
    </div>
</div>

CSS：可根据自己的也页面修改

<style type="text/css">
    .sel{
        padding-left: 200px;
    }
   .havechosen{
        padding-left: 85px;
    }
    .nochoice{
        padding-left: 165px;
    }
    #havechosen{
        height: 525px;
        width: 207px;
    }
    #nochoice{
        height: 525px;
        width: 207px;
    }

</style>

JS：

<script>
    //将未选择的添加到选择列表中
    $("#movebtn").click(function(){
        var nochoice = $("#nochoice"); //已绑定菜单
        $("#havechosen option:selected").each(function () { //可绑定菜单中选中的
            var option = $(this);
          
                    nochoice.append("<option value='"+ option.val() +"'>"+ option.text() +"</option>");
                    $("#havechosen option:selected").remove();
        });
    })
    //将已选择的添加到未选择列表中
    $("#removebtn").click(function(){
        var havechosen = $("#havechosen"); //已绑定菜单
        $("#nochoice option:selected").each(function () { //可绑定菜单中选中的
            var option = $(this);
          
                    havechosen.append("<option value='"+ option.val() +"'>"+ option.text() +"</option>");
                    $("#nochoice option:selected").remove();
          
        });
    })

</script>