JS左右選框(一)

一、採用純js實現

這個是左右選框公用畫面,SelectBox.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><script type="text/javascript" language="JavaScript">function allsel(n1, n2) {var selN1 = document.getElementById(n1);var selN2 = document.getElementById(n2);while (selN1.selectedIndex != -1) {var indx = selN1.selectedIndex;var t = selN1.options[indx].text;var v = selN1.options[indx].value;selN2.options.add(new Option(t, v));selN1.remove(indx);selN2.selected = true;}}function selall(n1, n2) {var selN1 = document.getElementById(n1);var selN2 = document.getElementById(n2);for ( var i = 0; i < selN1.options.length; i++) {var t = selN1.options[i].text;var v = selN1.options[i].value;selN2.options.add(new Option(t, v));}for ( var j = selN1.options.length; j >= 0; j--) {selN1.remove(j);}}</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"name="sure1" type="button" id="sure1"onclick="selall('selectRights','selectedRights')" value=">>"><input style="width: 50px" name="sure2" type="button" id="sure2"onclick="allsel('selectRights','selectedRights')" value=">"><input style="width: 50px" name="sure3" type="button" id="sure3"onclick="allsel('selectedRights','selectRights')" value="<"><input style="width: 50px" name="sure4" type="button" id="sure4"onclick="selall('selectedRights','selectRights')" 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>

jsp畫面中，

selectedRoleList是一個集合，是從db中查詢出來的。

基本原型如：