JS左右选框(二)

最新推荐文章于 2025-08-07 15:29:44 发布

iteye_9475

最新推荐文章于 2025-08-07 15:29:44 发布

阅读量177

点赞数

文章标签： java javascript ViewUI

本文介绍了一个使用JQuery实现的权限管理界面，通过四个按钮（全选、单选、全不选、单不选）实现权限选项从未选取到已选取区域的动态转移，并支持批量操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二、采用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>