关于多个多选列表的数据移动问题..

[hui_feng]

现在有多个多选择列表,想把里面从数据库读了出来的数据移动到指定的一个多选择列表里...如果选择到指定的列表里的数据不对,想移回之前移到这个列表里..请问如何实现呢?

[andybogard]

可以用DOM来实现

[yi10000]

你在移之前对数据做个备份,当发现错误时,恢复就行了,这样就很简单了

[hui_feng]

yunxiang,我想到了,在试着改进,还没行
andybogard,用DOM怎么实现呢?
我要求的说是一个

[jk88811]

好吧, 帮顶一个

DOM, 好, 正在学

[syoumei]

循环一般的多选列表的时候

过滤下是否有“目标多选列表“的数据

结合yunxiang说的

[liaohaiying]

你等一下，我给你做出来

[hui_feng]

意思:

abc
bac
cca
dad

aaa
bff TO->
cdd BACK<-
dee


aaa
bsdf
cdff

当选择aaa时,按TO,就aaa直接过去右边..,当选择右边的aaa再按back,aaa就立即回到原来的位置.

[碧海情天-赵亮]

右边要移除时就一定要移回到原来的框里才行...
－－－－－－－－
在右边添加的时候，在VALUE里带上左边列表控件的名称作前缀区分即可。

[TaiNo]

哈哈，热闹，凑凑。

[liaohaiying]

哈哈，我来了，试试看，行不，行就给我加分吧
<SCRIPT LANGUAGE="JavaScript">
function move(tbox1) {
fbox=this.combo_box.list4;
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var arrtitle = new Array();
var arrtitle1 = new Array();
var i;
for (i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
arrtitle[i] = fbox.options[i].title;
//alert(arrtitle[i]);
arrTbox[i] = fbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < tbox1.options.length; i++) {
arrLookup[tbox1.options[i].text] = tbox1.options[i].value;
//alert(tbox1.options[i].title);
if (tbox1.options[i].selected && tbox1.options[i].value != "") {
arrTbox[tLength] = tbox1.options[i].text;
arrtitle[tLength] = tbox1.options[i].title;
tLength++;
}
else {
arrFbox[fLength] = tbox1.options[i].text;
arrtitle1[fLength] = tbox1.options[i].title;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox1.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
no.title = arrtitle1[c];
tbox1[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
no.title = arrtitle[c];
fbox[c] = no;
}
}

function move1() {
fbox=this.combo_box.list4;
var i;
var kkk;
for (i = 0; i < fbox.options.length; i++) {
//alert(fbox.options[i].title);
if (fbox.options[i].selected && fbox.options[i].value != "") {
kkk = fbox.options[i].title;
//alert(kkk);
}
}
if(kkk=="list1")
{
tbox1=this.combo_box.list1;
//alert("1");
}
if(kkk=="list2")
{
tbox1=this.combo_box.list2;
//alert("2");
}
if(kkk=="list3")
{
tbox1=this.combo_box.list3;
//alert("3");
}
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var arrtitle = new Array();
var arrtitle1 = new Array();
for (i = 0; i < tbox1.options.length; i++) {
arrLookup[tbox1.options[i].text] = tbox1.options[i].value;
arrtitle1[i] = tbox1.options[i].title;
arrTbox[i] = tbox1.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
arrtitle1[tLength] = fbox.options[i].title;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].text;
arrtitle[fLength] = fbox.options[i].title;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox1.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.title = arrtitle[c];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.title = arrtitle1[c];
no.text = arrTbox[c];
tbox1[c] = no;
}
}
</script>
<table align="center">
<tr><td>
<select multiple size="5" name="list1" style="width:150" ondblclick="move(this)">
<option value="11" title="list1">项目11</option>
<option value="12" title="list1">项目12</option>
<option value="13" title="list1">项目13</option>
<option value="14" title="list1">项目14</option>
<option value="15" title="list1">项目15</option>
</select><br>
<select multiple size="5" name="list2" style="width:150" ondblclick="move(this)">
<option value="1" title="list2">项目21</option>
<option value="2" title="list2">项目22</option>
<option value="3" title="list2">项目23</option>
<option value="4" title="list2">项目24</option>
<option value="5" title="list2">项目25</option>
</select><br>
<select multiple size="5" name="list3" style="width:150" ondblclick="move(this)">
<option value="1" title="list3">项目31</option>
<option value="2" title="list3">项目32</option>
<option value="3" title="list3">项目33</option>
<option value="4" title="list3">项目34</option>
<option value="5" title="list3">项目35</option>
</select>
</td>
<td align="center" valign="middle">
双击选择
</td>
<td>
<select multiple size="15" name="list4" style="width:150" ondblclick="move1()">
</select>
</td></tr></table>
</form>

[liaohaiying]

我可是牺牲了我的休息时间做的啊，调试的我好苦啊，我老婆还在一旁烦我，火死！
我是根据前面的例子改过来的，不过没有用按钮来选取了，因为用按钮会存在一个问题，这个问题留给楼主去发现吧

[liaohaiying]

修正版本，绝对好用，前面那个会出问题，这个怎么搞都没问题了
<SCRIPT LANGUAGE="JavaScript">
function move(tbox1) {
fbox=this.combo_box.list4;
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var arrtitle = new Array();
var arrtitle1 = new Array();
var i;
for (i = 0; i < fbox.options.length; i++) {
arrLookup[i] = fbox.options[i].value;
arrtitle[i] = fbox.options[i].title;
//alert(arrtitle[i]);
arrTbox[i] = fbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < tbox1.options.length; i++) {
arrLookup[i] = tbox1.options[i].value;
//alert(tbox1.options[i].title);
if (tbox1.options[i].selected && tbox1.options[i].value != "") {
arrTbox[tLength] = tbox1.options[i].text;
arrtitle[tLength] = tbox1.options[i].title;
tLength++;
}
else {
arrFbox[fLength] = tbox1.options[i].text;
arrtitle1[fLength] = tbox1.options[i].title;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
arrtitle.sort();
arrtitle1.sort();
fbox.length = 0;
tbox1.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[c];
no.text = arrFbox[c];
no.title = arrtitle1[c];
tbox1[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[c];
no.text = arrTbox[c];
no.title = arrtitle[c];
fbox[c] = no;
}
}

function move1() {
fbox=this.combo_box.list4;
var i;
var kkk;
for (i = 0; i < fbox.options.length; i++) {
//alert(fbox.options[i].title);
if (fbox.options[i].selected && fbox.options[i].value != "") {
kkk = fbox.options[i].title;
//alert(kkk);
}
}
if(kkk=="list1")
{
tbox1=this.combo_box.list1;
}
if(kkk=="list2")
{
tbox1=this.combo_box.list2;
}
if(kkk=="list3")
{
tbox1=this.combo_box.list3;
}
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var arrtitle = new Array();
var arrtitle1 = new Array();
for (i = 0; i < tbox1.options.length; i++) {
arrLookup[i] = tbox1.options[i].value;
arrtitle1[i] = tbox1.options[i].title;
arrTbox[i] = tbox1.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[i] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
arrtitle1[tLength] = fbox.options[i].title;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].text;
arrtitle[fLength] = fbox.options[i].title;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
arrtitle.sort();
arrtitle1.sort();
fbox.length = 0;
tbox1.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[c];
no.title = arrtitle[c];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[c];
no.title = arrtitle1[c];
no.text = arrTbox[c];
tbox1[c] = no;
}
}
</script>
<form name="combo_box">
<table align="center">
<tr><td>
<select multiple size="5" name="list1" style="width:150" ondblclick="move(this)">
<option value="11" title="list1">项目11</option>
<option value="12" title="list1">项目12</option>
<option value="13" title="list1">项目13</option>
<option value="14" title="list1">项目14</option>
<option value="15" title="list1">项目15</option>
</select><br>
<select multiple size="5" name="list2" style="width:150" ondblclick="move(this)">
<option value="21" title="list2">项目21</option>
<option value="22" title="list2">项目22</option>
<option value="23" title="list2">项目23</option>
<option value="24" title="list2">项目24</option>
<option value="25" title="list2">项目25</option>
</select><br>
<select multiple size="5" name="list3" style="width:150" ondblclick="move(this)">
<option value="31" title="list3">项目31</option>
<option value="32" title="list3">项目32</option>
<option value="33" title="list3">项目33</option>
<option value="34" title="list3">项目34</option>
<option value="35" title="list3">项目35</option>
</select>
</td>
<td align="center" valign="middle">双击选取
</td>
<td>
<select multiple size="15" name="list4" style="width:150" ondblclick="move1()">
</select>
</td></tr></table>
</form>

[hui_feng]

实在太感谢liaohaiying(小菜),不过功能一定要用按钮,因为不用它实现不了相应的三个框同时把数据移到一个框里.

[KITTY_chenming]

帮顶
希望你可以解决此问题

[liaohaiying]

试试这个，哈哈，结贴给我加分吧

<SCRIPT LANGUAGE="JavaScript">
function move(fbox, tbox) {
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for (i = 0; i < tbox.options.length; i++) {
arrLookup[tbox.options[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
}
else {
arrFbox[fLength] = fbox.options[i].text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
</script>
<form name="combo_box">
<table align="center">
<tr><td>
<select multiple size="10" name="list1" style="width:150">
<option value="1">项目1</option>
<option value="2">项目2</option>
<option value="3">项目3</option>
<option value="4">项目4</option>
<option value="5">项目5</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(this.form.list2,this.form.list1)" value="<<">
<input type="button" onClick="move(this.form.list1,this.form.list2)" value=">>">
</td>
<td>
<select multiple size="10" name="list2" style="width:150">
</select>
</td></tr></table>
</form>

[hui_feng]

楼上的,不对啊.这个效果我早会了..我要的就是左边有三个选择框,右边只有一个,然后左边任意选择一个框里的内容添加会把数据传到右边,但右边要移除时就一定要移回到原来的框里才行...

[For_suzhen]

只能备份一下了，用数组记忆下index,通过index先是那些被移除或被恢复的项。
lz 是不是这个意思

aaa
bbb TO->
ccc BACK<-
ddd

aaa
bbb TO->
ccc BACK<-
ddd
点击Back 时


aaa
bbb TO->
ccc BACK<-
ddd

[hui_feng]

thankQ

[liaohaiying]

做好了，老兄，昨天我出去了，赚分真辛苦啊，快结贴吧
<SCRIPT LANGUAGE="JavaScript">
function move(tbox1) {
fbox=this.combo_box.list4;
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var arrtitle = new Array();
var arrtitle1 = new Array();
var i;
for (i = 0; i < fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
arrtitle[i] = fbox.options[i].title;
//alert(arrtitle[i]);
arrTbox[i] = fbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length;
for(i = 0; i < tbox1.options.length; i++) {
arrLookup[tbox1.options[i].text] = tbox1.options[i].value;
//alert(tbox1.options[i].title);
if (tbox1.options[i].selected && tbox1.options[i].value != "") {
arrTbox[tLength] = tbox1.options[i].text;
arrtitle[tLength] = tbox1.options[i].title;
tLength++;
}
else {
arrFbox[fLength] = tbox1.options[i].text;
arrtitle1[fLength] = tbox1.options[i].title;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
arrtitle.sort();
arrtitle1.sort();
fbox.length = 0;
tbox1.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
no.title = arrtitle1[c];
tbox1[c] = no;
}
for(c = 0; c < arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
no.title = arrtitle[c];
fbox[c] = no;
}
}

function move1() {
fbox=this.combo_box.list4;
var i;
arrtitle2length = 0;
var arrtitle2 = new Array();
var arrFbox = new Array();
var arrLookup = new Array();
var arrtitle = new Array();
var arrTbox1 = new Array();
var arrLookup1 = new Array();
var arrtitle11 = new Array();
var arrTbox2 = new Array();
var arrLookup2 = new Array();
var arrtitle12 = new Array();
var arrTbox3 = new Array();
var arrLookup3 = new Array();
var arrtitle13 = new Array();
for (i = 0; i < fbox.options.length; i++) {
//alert(fbox.options[i].title);
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrtitle2[arrtitle2length] = fbox.options[i].title;
arrtitle2length++;
//alert(kkk);
}
}
tbox1=this.combo_box.list1;
tbox2=this.combo_box.list2;
tbox3=this.combo_box.list3;
for (i = 0; i < tbox1.options.length; i++) {
arrLookup1[i] = tbox1.options[i].value;
arrtitle11[i] = tbox1.options[i].title;
arrTbox1[i] = tbox1.options[i].text;
}
for (i = 0; i < tbox2.options.length; i++) {
arrLookup2[i] = tbox2.options[i].value;
arrtitle12[i] = tbox2.options[i].title;
arrTbox2[i] = tbox2.options[i].text;
}
for (i = 0; i < tbox3.options.length; i++) {
arrLookup3[i] = tbox3.options[i].value;
arrtitle13[i] = tbox3.options[i].title;
arrTbox3[i] = tbox3.options[i].text;
}
var fLength = 0;
var tLength1 = arrTbox1.length;
var tLength2 = arrTbox2.length;
var tLength3 = arrTbox3.length;
for(i = 0; i < fbox.options.length; i++) {
if (fbox.options[i].selected && fbox.options[i].value != "") {
if(fbox.options[i].title=="list1"){
arrLookup1[tLength1] = fbox.options[i].value;
arrTbox1[tLength1] = fbox.options[i].text;
arrtitle11[tLength1] = fbox.options[i].title;
tLength1++;}
if(fbox.options[i].title=="list2"){
arrLookup2[tLength2] = fbox.options[i].value;
arrTbox2[tLength2] = fbox.options[i].text;
arrtitle12[tLength2] = fbox.options[i].title;
tLength2++;}
if(fbox.options[i].title=="list3"){
arrLookup3[tLength3] = fbox.options[i].value;
arrTbox3[tLength3] = fbox.options[i].text;
arrtitle13[tLength3] = fbox.options[i].title;
tLength3++;}
}
else {
arrLookup[fLength] = fbox.options[i].value;
arrFbox[fLength] = fbox.options[i].text;
arrtitle[fLength] = fbox.options[i].title;
fLength++;
}
}
arrFbox.sort();
arrTbox1.sort();
arrTbox2.sort();
arrTbox3.sort();
arrtitle.sort();
arrtitle11.sort();
arrtitle12.sort();
arrtitle13.sort();
fbox.length = 0;
tbox1.length = 0;
var c;
for(c = 0; c < arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[c];
no.title = arrtitle[c];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c = 0; c < arrTbox1.length; c++) {
var no = new Option();
no.value = arrLookup1[c];
no.title = arrtitle11[c];
no.text = arrTbox1[c];
tbox1[c] = no;
}
for(c = 0; c < arrTbox2.length; c++) {
var no = new Option();
no.value = arrLookup2[c];
no.title = arrtitle12[c];
no.text = arrTbox2[c];
tbox2[c] = no;
}
for(c = 0; c < arrTbox3.length; c++) {
var no = new Option();
no.value = arrLookup3[c];
no.title = arrtitle13[c];
no.text = arrTbox3[c];
tbox3[c] = no;
}
}
</script>
<form name="combo_box"><input value="ddddd" type="button" title="list1" onclick="alert(combo_box.list1.value.title);">
<table align="center">
<tr><td>
<select multiple size="5" name="list1" style="width:150" ondblclick="move(this)">
<option value="11" title="list1" onclick="if(this.focus()){this.blur();alert('1');}else{this.focus();alert('2');}">项目11</option>
<option value="12" title="list1" onclick="if(this.focus()){this.blur();alert('1');}else{this.focus();alert('2');}">项目12</option>
<option value="13" title="list1" onclick="if(this.focus()){this.blur();alert('1');}else{this.focus();alert('2');}">项目13</option>
<option value="14" title="list1" onclick="if(this.focus()){this.blur();alert('1');}else{this.focus();alert('2');}">项目14</option>
<option value="15" title="list1" onclick="if(this.focus()){this.blur();alert('1');}else{this.focus();alert('2');}">项目15</option>
</select><br>
<select multiple size="5" name="list2" style="width:150" ondblclick="move(this)">
<option value="1" title="list2">项目21</option>
<option value="2" title="list2">项目22</option>
<option value="3" title="list2">项目23</option>
<option value="4" title="list2">项目24</option>
<option value="5" title="list2">项目25</option>
</select><br>
<select multiple size="5" name="list3" style="width:150" ondblclick="move(this)">
<option value="1" title="list3">项目31</option>
<option value="2" title="list3">项目32</option>
<option value="3" title="list3">项目33</option>
<option value="4" title="list3">项目34</option>
<option value="5" title="list3">项目35</option>
</select>
</td>
<td align="center" valign="middle">
<input type="button" onClick="move(combo_box.list3);move(combo_box.list2);move(combo_box.list1);" value="to">
<input type="button" onClick="move1()" value="back">
</td>
<td>
<select multiple size="15" name="list4" style="width:150" ondblclick="move1()">
</select>
</td></tr></table>
</form>

[侠雨飞飞]

Good