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

bfcyyb 2004-11-10 01:27:24
假设WEB页面上有两个列表框，如何实现双击其中一个列表框的项目，自动转移到另一个列表框。
或者我选择多项，然后按一个按钮，也可转移到另一个列表框。
多谢。
...全文
199 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
发财蛇 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中实现列表框项目转移
<script language="javascript">  function LeftToRight(Left,Right){ //左边加到右边  for(var i=Left.length-1;i>=0;i--){  if(Left.options[i].selected){  var j = Right.options.length - 1;  for (; j >...
使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。
使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。 将下面的代码存成html文件，运行就可看到效果。
javascript操作多选列表框
javascript操作多选列表框 使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。将下面的代码存成html文件，运行就可看到效果。 /**************************************************...
JavaScript实现左右Select列表框交换数据
* 3， moveSelected(oSourceSel,oTargetSel) －－－－－－ 在两个列表框之间转移数据 * 4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－ 转移两个列表框之间的全部数据 * 5， deleteSelectItem(oSelect) ...
Asp.Net之两个ListBox的列表项选择移动操作
回想一下，原来在Asp中要使用Javascript来操作Select列表框。在Asp.Net中只需要简单的了解其中的一些属性及方法就可以做出完美的列表框操作。　思路：　１.初始化页面时，向第二个列表框添加一默认列表项，且屏蔽...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章