JS左右选框(三)

这次是js结合jquery实现，需求也变了，左边是下拉选单，右边是table表格。

要求，左边选择，可以在右边表格中显示出来，右边表格可以删除。

SelectBox.jsp代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript" language="JavaScript"> //添加 $(function(){ $("#add").click(function(){ var html = ""; if($("#selectRights option:selected").length > 0){//如果有選中 //顯示列標題 document.getElementById("headTitle").style.display = ""; $("#selectRights option:selected").each(function(){ html = ""; html+="<tr class='table-odd-row' id='shihuangzhe'>" +"<td class='table-other-column'><a href='javascript:void(0)' onclick='remove(this,\""+$(this).val()+"\",\""+$(this).text()+"\")'><img src='${ctx}/images/u78.png' width='16' height='16' border='0' alt='刪除'></a></td>" +"<td class='table-string-column'>"+ $(this).text() +"</td>" +"<td class='table-string-column'><input type='text' class='textbox_char_150' name='subWorkName'></td>" +"<td class='table-string-column'><input type='text' class='textbox_char_150' name='subEstimate'></td>" +"<td class='table-num-column'><select name='subWorkStatus'><option value='230001'>未完成</option><option value='230002'>已完成</option></select></td>" +"<td class='table-string-column'><input type='text' class='textbox_char_150' name='subComment'></td>" +"</tr>"; $("#tab1 tbody").append(html); $(this).remove(); }) } }) }) //重置 $(function(){ $("#removeAll").click(function(){ //清楚右邊table內容 $("#tab1 tbody").empty(); //隱藏列標題 document.getElementById("headTitle").style.display = "none"; var selN1 = document.getElementById("selectedRights"); var selN2 = document.getElementById("selectRights"); //先清空左邊的select下拉選單 if(selN2.options.length > 0){ for ( var j = selN2.options.length; j >= 0; j--) { selN2.remove(j); } } //將隱藏的右邊select下拉選單的值挪到左邊 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)); } }) }) //刪除 function remove(obj,value,key){ var tr = obj.parentNode.parentNode; var tbody = tr.parentNode; tbody.removeChild(tr); //將移除的option添加到右邊 $("#selectRights").append("<option value='"+value+"'>"+key+"</option>"); if(document.getElementById("shihuangzhe") == null || document.getElementById("shihuangzhe") == 'undefined'){ //隱藏列標題 document.getElementById("headTitle").style.display = "none"; } } </script> <table class="tablestyle" cellspacing="0" cellpadding="0"> <tr class="tdstyle2"> <td width="220"> <table width="200" border="0" cellpadding="1" cellspacing="1" > <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="sure2" type="button" id="add" value=">"> <input style="width: 50px" name="sure3" type="button" id="removeAll" value="重置"> </td> <td valign="top"> <table id="tab1" cellspacing="2" cellpadding="1" class="tablestyle1"> <thead id="headTitle" style="display: none;"> <tr> <th class="headers" scope="col">處理</th> <th class="headers" scope="col">用戶名</th> <th class="headers" scope="col">子任務名</th> <th class="headers" scope="col">預估</th> <th class="headers" scope="col">任務狀態</th> <th class="headers" scope="col">附注</th> </tr> </thead> <tbody> </tbody> </table> <select id="selectedRights" size="8" multiple="multiple" style="width:200px;display: none;"> <c:forEach items="${selectRoleList }" var="option"> <option value="${option.value }" >${option.name }</option> </c:forEach> </select> </td> </tr> </table>

画面类似于下面的：

左边选择后，则加入到右边的动态table中。