JS左右选框(一)

最新推荐文章于 2019-07-20 15:43:52 发布

最新推荐文章于 2019-07-20 15:43:52 发布 · 255 阅读

文章标签：

#java #javascript #ViewUI

本文介绍了一个使用纯JavaScript实现的左右选框功能。该功能通过两个下拉多选框展示选项，用户可以将选项从“未选取”框移动到“已选取”框。代码示例展示了如何使用JavaScript操作DOM元素来实现这一功能。

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

一、采用纯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中查询出来的。
基本原型如下图：