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>