select 左右移动(原先项目中的权限)
程序员文章站
2022-06-08 10:48:58
...
<html>
<head>
<title>test.html</title>
<script type="text/javascript">
function addItem(sour,dest){
if(sour.selectedIndex==-1){
return;
}
var sourText = sour.options[sour.selectedIndex].text;
var sourValue = sour.options[sour.selectedIndex].value;
dest.options.add(new Option(sourText,sourValue));
sour.options.remove(sour.selectedIndex);
}
function addItemAll(sour,dest){
if(sour.length==-1){
return;
}
for(var i=0;i<sour.length;i++){
var sourText = sour.options[i].text;
var sourValue = sour.options[i].value;
dest.options.add(new Option(sourText,sourValue));
}
var k=0;
while((k = sour.length-1)>=0){
sour.options.remove(k);
}
}
</script>
</head>
<body>
<form name="from1" action="action1">
<table name="table1">
<tr>
<td>
可用：<br>
<select name="leftSelect" multiple="multiple" style="width:300px;heigth:300px;" ondblclick="addItem(leftSelect,rightSelect)">
<option value="loption1" >101项</option>
<option value="loption2" >102项</option>
<option value="loption3" >103项</option>
<option value="loption4" >104项</option>
<option value="loption5" >105项</option>
</select>
</td>
<td>
<input name="addButton" type="button" value="添加>>" onclick="addItem(leftSelect,rightSelect)"/>
<br>
<input name="addAll" type="button" value="全部添加>>" onclick="addItemAll(leftSelect,rightSelect)"/>
<br>
<input name="removeButton" type ="button" value="移出" onclick="addItem(rightSelect,leftSelect)"/>
<br>
<input name="reMoveAll" type="button" value="全部移除" onclick="addItemAll(rightSelect,leftSelect)"/>
</td>
<td>
现有:<br>
<select name="rightSelect" multiple="multiple" style="width:300px;heigth:300px;" ondblclick="addItem(rightSelect,leftSelect)">
<option value="roption1" >96项</option>
<option value="roption2" >97项</option>
<option value="roption3" >98项</option>
<option value="roption4" >99项</option>
<option value="roption5" >100项</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>