将select中的项从一个移动到另一个select中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
??? <title>將select中的項互相移動(添加或移除)</title>
?<script language="javascript" type="text/javascript">
??function execSelectGroup(tagContentID, flag)
??{
????? var obj = document.getElementById(tagContentID).getElementsByTagName("select");
????? var i, j, moveFrom, moveTo;
????? if(flag == 1 || flag == 2)????????????????? //全部添加或添加
????? {
????????? moveFrom = obj[0];????????????????????? //availableGroups???????????
????????? moveTo = obj[1];??????????????????????? //selectedGroups
????? }
????? else if(flag == 3 || flag == 4)???????????? //刪除或全部刪除
????? {
????????? moveFrom = obj[1];
????????? moveTo = obj[0];
????? }
?????
????? for(i = 0; i < moveFrom.length;)
????? {
????????? var op = moveFrom.options[i];
????????? if(flag == 1 || flag == 4 || moveFrom.options[i].selected)? //全部添加或移除
????????? {
????????????? var newOption = document.createElement("option");
????????????? newOption.value = op.value;
????????????? newOption.text = op.text;
????????????? moveTo.options.add(newOption);????? //增加一個
????????????? moveFrom.remove(i);
????????? }
???????????? else
???????????????? i++;
????? }
??}
?</script>
</head>
<body>
?<div id="addAccount_tagContent3" class="tagContent">
??<table width="600" border="0" cellspacing="0" cellpadding="5">
??? <tr>
???<td>
?????? <fieldset>
??????? <legend>組信息</legend>
?????<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center">
?????? <tr>
??????<td style="width:40%;text-align:center;">
???????可選組
??????</td>
??????<td>
???????
??????</td>
??????<td style="width:40%;text-align:center;">
???????已選組
??????</td>
?????? </tr>
?????? <tr>
??????<td style="width:40%;text-align:center;">
???????<select name="availableGroups" size="10" style="width:120px;" multiple>
????????<option value="1">可選組一</option>
????????<option value="2">可選組二</option>
????????<option value="3">可選組三</option>
???????</select>
??????</td>
??????<td align="center">
???????<input type="button" name="selectAll" value=">>" style="width:35px; height:18px; margin-bottom:2px;" title="全部添加" οnclick="execSelectGroup('addAccount_tagContent3', 1)" /><br/>
???????<input type="button" name="addThis" value=">" style="width:35px; height:18px; margin-bottom:2px;" title="添加" οnclick="execSelectGroup('addAccount_tagContent3', 2)" /><br/>
???????<input type="button" name="deleteThis" value="<" style="width:35px; height:18px; margin-bottom:2px;" title="刪除" οnclick="execSelectGroup('addAccount_tagContent3', 3)" /><br/>
???????<input type="button" name="deleteAll" value="<<" style="width:35px; height:18px; margin-bottom:2px;" title="全部刪除" οnclick="execSelectGroup('addAccount_tagContent3', 4)" /><br/>
??????</td>
??????<td style="width:40%;text-align:center;">
???????<select name="selectedGroups" size="10" style="width:120px;" multiple>
????????<option value="1">已選組一</option>
????????<option value="2">已選組二</option>
????????<option value="3">已選組三</option>
????????<option value="4">已選組四</option>
???????</select>
??????</td>
?????? </tr>
?????</table>
?????? </fieldset>
???</td>
??? </tr>
??</table>
?</div>
?<div id="editAccount_tagContent3" class="tagContent">
???? <table width="600" border="0" cellspacing="0" cellpadding="5">
?????? <tr>
????? <td>
????????? <fieldset>
?????????? <legend>組信息</legend>
??????? <table width="100%" border="0" cellspacing="0" cellpadding="2" align="center">
????????? <tr>
???????? <td style="width:40%;text-align:center;">
????????? 可選組
???????? </td>
???????? <td>
??? ??????
???????? </td>
???????? <td style="width:40%;text-align:center;">
????????? 已選組
???????? </td>
????????? </tr>
????????? <tr>
???????? <td style="width:40%;text-align:center;">
????????? <select name="availableGroups" size="10" style="width:120px;" multiple>
?????????? <option value="1">可選組一</option>
?????????? <option value="2">可選組二</option>
?????????? <option value="3">可選組三</option>
?????????? <option value="4">可選組四</option>
?????????? <option value="5">可選組五</option>
????????? </select>
???????? </td>
???????? <td align="center">
????????? <input type="button" name="selectAll" value=">>" style="width:35px; height:18px; margin-bottom:2px;" title="全部添加" οnclick="execSelectGroup('editAccount_tagContent3', 1)" /><br>
????????? <input type="button" name="addThis" value=">" style="width:35px; height:18px; margin-bottom:2px;" title="添加" οnclick="execSelectGroup('editAccount_tagContent3', 2)" /><br>
????????? <input type="button" name="deleteThis" value="<" style="width:35px; height:18px; margin-bottom:2px;" title="刪除" οnclick="execSelectGroup('editAccount_tagContent3', 3)" /><br>
????????? <input type="button" name="deleteAll" value="<<" style="width:35px; height:18px; margin-bottom:2px;" title="全部刪除" οnclick="execSelectGroup('editAccount_tagContent3', 4)" /><br>
???????? </td>
???????? <td style="width:40%;text-align:center;">
????????? <select name="selectedGroups" size="10" style="width:120px;" multiple>
?????????? <option value="1">已選組一</option>
?????????? <option value="2">已選組二</option>
????????? </select>
???????? </td>
????????? </tr>
??????? </table>
????????? </fieldset>
????? </td>
?????? </tr>
???? </table>
??? </div>
</body>
</html>
總結
以上是生活随笔為你收集整理的将select中的项从一个移动到另一个select中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于C# 和Access数据库的电影院管
- 下一篇： 图片不显示问题 图片url监测改变问题