|
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <script src="js/jquery-3.2.1.min.js"></script>
? ? <style type="text/css">
? ? ? ? select{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ??
? ? ? ? }
? ? ? ? </style>
</head>
<body>
? ? <table>
? ? ? ? <tr>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <select id="leftSelect" multiple="multiple">
? ? multiple 属性规定可同时选择多个选项
? ? ? ? ? ? ? ? ? ? <option>登录</option>
? ? ? ? ? ? ? ? ? ? <option>员工管理</option>
? ? ? ? ? ? ? ? ? ? <option>部门管理</option>
? ? ? ? ? ? ? ? ? ? <option>订单管理</option>
? ? ? ? ? ? ? ? </select>
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <input type="button" value=">" οnclick="rightMove()"><br>
? ? ? ? ? ? ? ? <input type="button" value=">>" οnclick="rightMoveAll()"><br>
? ? ? ? ? ? ? ? <input type="button" value="<" οnclick="leftMove()"><br>
? ? ? ? ? ? ? ? <input type="button" value="<<" οnclick="leftMoveAll()">
? ? ? ? ? ? </td>
? ? ? ? ? ? <td>
? ? ? ? ? ? ? ? <select id="rightSelect" multiple="multiple">
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? </select>
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? </table>
? ? <script>
? ? ? ? //选中 向右 走1个 ?如何判断 被选中 checked ， selected ?被选中
? ? ? ? function rightMove(){
? ? ? ? ? ? var leftSelectdom = $("#leftSelect option");
? ? ? ? ? ? $.each(leftSelectdom, function(index,value){
? ? ? ? ? ? ? ? var isSelected = $(this).prop("selected");
? ? ? ? ? ? ? ? //把被选中的移过去
? ? ? ? ? ? ? ? if(isSelected){
? ? ? ? ? ? ? ? ? ? $(this).appendTo("#rightSelect")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? //全部去右边
? ? ? ? function rightMoveAll(){
? ? ? ? ? ? var leftSelectdom = $("#leftSelect option");
? ? ? ? ? ? $.each(leftSelectdom, function(index,value){
? ? ? ? ? ? ? ? $(this).appendTo("#rightSelect")
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? //选中的去左边
? ? ? ? function leftMove(){
? ? ? ? ? ? var rightSelectdom = $("#rightSelect option");
? ? ? ? ? ? $.each(rightSelectdom, function(index,value){
? ? ? ? ? ? ? ? var isSelected = $(this).prop("selected");
? ? ? ? ? ? ? ? //把被选中的移过去
? ? ? ? ? ? ? ? if(isSelected){
? ? ? ? ? ? ? ? ? ? $(this).appendTo("#leftSelect")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? //全部去左边
? ? ? ? function leftMoveAll(){
? ? ? ? ? ? var rightSelectdom = $("#rightSelect option");
? ? ? ? ? ? $.each(rightSelectdom, function(index,value){
? ? ? ? ? ? ? ? $(this).appendTo("#leftSelect")
? ? ? ? ? ? })
? ? ? ? }
? ? </script>
</body>
|