如何在javascript中实现列表框项目转移

bfcyyb 2004-11-10 01:27:24
假设WEB页面上有两个列表框,如何实现双击其中一个列表框的项目,自动转移到另一个列表框。
或者我选择多项,然后按一个按钮,也可转移到另一个列表框。
多谢。
...全文
186 8 打赏 收藏 举报
写回复
8 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
发财蛇 2004-11-22
  • 打赏
  • 举报
回复
mark
Yansharp 2004-11-10
  • 打赏
  • 举报
回复
将上面的我的两片帖子,保存成一个htm,就可以看到效果了
micker 2004-11-10
  • 打赏
  • 举报
回复
来晚了,楼上cloudside(在云的那一方)的正确。。。
Yansharp 2004-11-10
  • 打赏
  • 举报
回复

<script language = "JavaScript">
//carrier list
document.all.selectableIDList.length = 0;
var i;
var GetUsersID;
var GetSelectedUserID="";

for (i=0;i < onecount; i++)
{
document.all.selectableIDList.options[document.all.selectableIDList.length] = new Option (subcat[i][1],subcat[i][0]);

}

function addConfirmer() {
//select carrier
for (i = 0; i < document.all.selectableIDList.options.length; i++) {
if (document.all.selectableIDList.options(i).selected == true) {
j = document.all.selectedIDList.options.length - 1;
for (; j >= 0; j--) {
if (document.all.selectableIDList.item(i).value == document.all.selectedIDList.item(j).value) {

break;
}
}
if (j<0) {
newOpt = new Option(document.all.selectableIDList.item(i).text, document.all.selectableIDList.item(i).value);
document.all.selectedIDList.add(newOpt);
}
}
}
}
function addAll() {
//select all carrier
removeAll();
for (i = 0; i < document.all.selectableIDList.options.length; i++) {
//if (document.all.selectableIDList.options(i).selected == true) {
j = document.all.selectedIDList.options.length - 1;

//if (j<0) {
newOpt = new Option(document.all.selectableIDList.item(i).text, document.all.selectableIDList.item(i).value);
document.all.selectedIDList.add(newOpt);
//}
//}
}
}
function removeConfirmer() {
//Delete selected carrier
myindex = -1;
for (i = document.all.selectedIDList.options.length - 1; i > myindex; i--) {
if (document.all.selectedIDList.options(i).selected == true) {
document.all.selectedIDList.remove(i);
}

}

}
function removeAll() {
//Delete selected carrier
myindex = -1;
for (i = document.all.selectedIDList.options.length - 1; i > myindex; i--) {
//if (document.all.selectedIDList.options(i).selected == true) {
document.all.selectedIDList.remove(i);
//}

}

}
function moveUpDn(direction) {
//Up or Down
myindex = 0;
for (; myindex < document.all.selectedIDList.options.length; myindex++) {
var text = document.all.selectedIDList.options(myindex).text;
if ( text.charAt(0) != '*'){
myindex--;
//if (myform.selectedIDList.options(myindex).value == myform.operatorID.value) {
break;
}
}

if (myindex == document.all.selectedIDList.options.length) {
myindex = -1;
}

index = document.all.selectedIDList.options.length;
count = 0;
for (i = document.all.selectedIDList.options.length - 1; i > myindex; i--) {
if (document.all.selectedIDList.options(i).selected == true) {
count++;
index = i;
}
}
if (count == 1) { // Select One only
if (direction < 0 && index > myindex + 1) { // Up
newOpt = new Option(document.all.selectedIDList.item(index).text, document.all.selectedIDList.item(index).value);
newOpt.selected = true;
document.all.selectedIDList.remove(index);
document.all.selectedIDList.add(newOpt, index + direction);
}
if (direction > 0 && index < document.all.selectedIDList.options.length - 1) { // Down
newOpt = new Option(document.all.selectedIDList.item(index).text, document.all.selectedIDList.item(index).value);
newOpt.selected = true;
document.all.selectedIDList.remove(index);
document.all.selectedIDList.add(newOpt, index + direction);
}
}
}



</script>
Yansharp 2004-11-10
  • 打赏
  • 举报
回复
分两次发
<script language = 'JavaScript'>
var onecount;
onecount=0;
subcat = new Array();

subcat[0] = new Array('1','A');
subcat[1] = new Array('2','B');
subcat[2] = new Array('3','C');
subcat[3] = new Array('4','D');
subcat[4] = new Array('5','E');
onecount = 5;
</script>
<html>
<head>
<title>
</title>
</head>
<body bgcolor="#efefef">
<table width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="3" height="1" align=center background="../image/5-1_r11_c10.jpg"></td>
<td height="1">
</td>
</tr>

<tr bgcolor="#efefef">
<td width="200" height="1" align="left">
<select name="selectableIDList" multiple size="20" style="width:160; height:300" onDblClick="addConfirmer(); return

false;">
</select>
</td>
<td bgcolor="#efefef" valign="middle">
<table>
<tr>
<td>
<img alt="" src="../image/R.gif" onclick="addConfirmer(); return false;" style="cursor: hand"/>add
</td>
</tr>
<tr>
<td>
<img alt="" src="../image/RR.gif" onclick="addAll(); return false;" style="cursor: hand"/>add all
</td>
</tr>
<tr>
<td height="5">
 
</td>
</tr>
<tr>
<td>
<img src="../image/L.gif" onclick="removeConfirmer(); return false;" style="cursor: hand"/>remove
</td>
</tr>
<tr>
<td>
<img src="../image/LL.gif" onclick="removeAll(); return false;" style="cursor: hand"/>remove all
</td>
</tr>
</table>
</td>
<td width="200" height="1" align="right">
<select name="selectedIDList" multiple size="20" style="width:160; height:300" onDblClick="removeConfirmer(); return

false;">
</select>
</td>
<td valign=middle width="20" align="left">
<img alt="" src="../image/U.gif" onclick="moveUpDn(-1)" style="cursor: hand"/>up

<br />
<img alt="" src="../image/D.gif" onclick="moveUpDn(1)" style="cursor: hand"/>down

</td>
</tr>
<tr>
<td height="10" colspan="4">
</td>
</tr>
<tr>
<td colspan="3" align="center">
<a href="#" onclick="GetUsers()"><img src="../image/submit.gif" border=0></a> 
<a href="#" onclick="removeAll(); return false;"><img src="../image/reset.GIF" border=0></a> 
<a href="#" onclick="javascript:window.close();"><img src="../image/cancel.gif" border=0></a>
</td>
<td>
 
</td>
</tr>
</table>
<input type="hidden" name="selectedUsers"/>
<input type="hidden" name="selectedUsersID"/>

</body>
</html>
cloudside 2004-11-10
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function LeftToRight(){
for(var i=left.length-1;i>=0;i--){
if(left.options[i].selected){
var op = document.createElement("OPTION");
op.text=left.options[i].text;
op.value=left.options[i].value;
right.add(op);
left.options[i] = null;
}
}
}
function RightToLeft(){
for(var i=right.length-1;i>=0;i--){
if(right.options[i].selected){
var op = document.createElement("OPTION");
op.text=right.options[i].text;
op.value=right.options[i].value;
left.add(op);
right.options[i] = null;
}
}
}
</script>
</HEAD>
<BODY>
<table>
<tr><td>
<SELECT NAME="left" size="10" multiple="true">
<option value="1">AAA</option>
<option value="2">BBB</option>
<option value="3">CCC</option>
<option value="4">DDD</option>
<option value="5">EEE</option>
</SELECT>
</td>
<td>
<table><tr><td>
<input type="button" value="--->" onclick="LeftToRight()"><br><br>
<input type="button" value="<---" onclick="RightToLeft()">
</td></tr></table>
</td><td>
<SELECT NAME="right" size="10" multiple="true" ></SELECT>
</td></tr></table>
</BODY>
</HTML>
zhwb36 2004-11-10
  • 打赏
  • 举报
回复
<select name="select1" id="select1" ondblclick="select1_dblclick();">
function select1_dblclick(){
document.all.select2.add(document.all.select1.options[document.all.select1.selectedIndex]);
}

stefli 2004-11-10
  • 打赏
  • 举报
回复
http://www.51windows.net/hw/asp/jsview.asp?id=312
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-11-10 01:27
社区公告
暂无公告