JS左右选框(二)

二、采用Jquery实现

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript" language="JavaScript"> //add $(function(){ $("#add").click(function(){ if($("#selectRights option:selected").length > 0){//如果有選中 $("#selectRights option:selected").each(function(){ $("#selectedRights").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); $(this).remove(); }) } }) }) //addAll $(function(){ $("#addAll").click(function(){ $('#selectRights option').appendTo('#selectedRights'); }) }) //remove $(function(){ $("#remove").click(function(){ if($("#selectedRights option:selected").length > 0){//如果有選中 $("#selectedRights option:selected").each(function(){ $("#selectRights").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); $(this).remove(); }) } }) }) //removeAll $(function(){ $("#removeAll").click(function(){ $('#selectedRights option').appendTo('#selectRights'); }) }) </script> <table width="460" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td width="220"> <table width="200" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center">未選取</td> </tr> <tr> <td align="center" width="200" bgcolor="#FFFFFF"> <select id="selectRights" size="8" multiple="multiple" style="width:200px "> <c:forEach items="${selectRoleList }" var="option"> <option value="${option.value }" >${option.name }</option> </c:forEach> </select> </td> </tr> </table></td> <td width="25" align="center"> <input style="width: 50px" type="button" id="addAll" value=">>"> <input style="width: 50px" type="button" id="add" value=">"> <input style="width: 50px" type="button" id="remove" value="<"> <input style="width: 50px" type="button" id="removeAll" value="<<"> </td> <td width="200" colspan=""> <table width="200" border="0" cellpadding="1" cellspacing="1"> <tr> <td align="center">已選取</td> </tr> <tr> <td align="center" width="200" bgcolor="#FFFFFF"> <select id="selectedRights" size="8" multiple="multiple" style="width:200px "> <c:forEach items="${selectedRoleList }" var="option"> <option value="${option.value }" >${option.name }</option> </c:forEach> </select> </td> </tr> </table> </td> </tr> </table>