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>