列表框多选数据至另一个列表框?

<HTML>
<HEAD>
<TITLE>Menu Swapper</TITLE>
<META HTTP-EQUIV="The JavaScript Source" CONTENT="no-cache"><SCRIPT LANGUAGE="JavaScript">
<!-- Begin
sortitems = 1;  // Automatically sort items within lists? (1 or 0)
function move(fbox,tbox,movemod) {
for(var i=0; i<fbox.options.length; i++) {
if((fbox.options[i].selected || movemod) && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function BumpUp(box)  {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "")  {
for(var j=i; j<box.options.length-1; j++)  {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;
break;
}
}
if(ln < box.options.length)  {
box.options.length -= 1;
BumpUp(box);
}
}
function SortD(box)  {
var temp_opts = new Array();
var temp = new Object();
for(var i=0; i<box.options.length; i++)  {
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++)  {
for(var y=(x+1); y<temp_opts.length; y++)  {
if(temp_opts[x].text > temp_opts[y].text)  {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
}
}
}
for(var i=0; i<box.options.length; i++)  {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
function restr(rbox,tbox,str)  {
if(tbox.options.length){
rbox.value = tbox.options[0].value;
for(var i=1; i<tbox.options.length; i++) {
rbox.value = rbox.value+str+tbox.options[i].value;
}
}else rbox.value = ""
}
// End -->
</script>
</HEAD><BODY><center><center>
<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td>可选项目：<br>
<select multiple size="8" name="list1" style="width: 150">
<option value="11"> item 1.1 </option>
<option value="12"> item 1.2 </option>
<option value="13"> item 1.3 </option>
<option value="21"> item 2.1 </option>
<option value="22"> item 2.2 </option>
<option value="23"> item 2.3 </option>
</select>
</td>
<td>
<input type="button" value=">>" onclick="move(this.form.list1,this.form.list2,1)" name="B0" style="font-weight: bold; width: 32"><br>
<input type="button" value=">" onclick="move(this.form.list1,this.form.list2,0)" name="B1" style="font-weight: bold; width: 32"><br>
<input type="button" value="<" onclick="move(this.form.list2,this.form.list1,0)" name="B2" style="font-weight: bold; width: 32"><br>
<input type="button" value="<<" onclick="move(this.form.list2,this.form.list1,1)" name="B3" style="font-weight: bold; width: 32">
</td>
<td>已选项目：<br><select multiple size="8" name="list2" style="width: 150"></select></td>
</tr>
</table>
<input type="text" name="rst" value="" size="41">
<input type="button" value="go" onclick="restr(this.form.rst,this.form.list2,',')" name="B4" style="font-weight: bold; width: 32">
</form>
</center>
</center>
</body></html>

解决方案 »

  1.   

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body bgcolor="#FFFFFF" text="#000000">
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function moveOver()  
    {
    var boxLength = document.choiceForm.choiceBox.length;
    var selectedItem = document.choiceForm.available.selectedIndex;
    var selectedText = document.choiceForm.available.options[selectedItem].text;
    var selectedValue = document.choiceForm.available.options[selectedItem].value;
    var i;
    var isNew = true;
    if (boxLength != 0) {
    for (i = 0; i < boxLength; i++) {
    thisitem = document.choiceForm.choiceBox.options[i].text;
    if (thisitem == selectedText) {
    isNew = false;
    break;
          }
       }
    } 
    if (isNew) {
    newoption = new Option(selectedText, selectedValue, false, false);
    document.choiceForm.choiceBox.options[boxLength] = newoption;
    }
    document.choiceForm.available.selectedIndex=-1;
    }
    function removeMe() {
    var boxLength = document.choiceForm.choiceBox.length;
    arrSelected = new Array();
    var count = 0;
    for (i = 0; i < boxLength; i++) {
    if (document.choiceForm.choiceBox.options[i].selected) {
    arrSelected[count] = document.choiceForm.choiceBox.options[i].value;
    }
    count++;
    }
    var x;
    for (i = 0; i < boxLength; i++) {
    for (x = 0; x < arrSelected.length; x++) {
    if (document.choiceForm.choiceBox.options[i].value == arrSelected[x]) {
    document.choiceForm.choiceBox.options[i] = null;
       }
    }
    boxLength = document.choiceForm.choiceBox.length;
       }
    }
    function saveMe() {
    var strValues = "";
    var boxLength = document.choiceForm.choiceBox.length;
    var count = 0;
    if (boxLength != 0) {
    for (i = 0; i < boxLength; i++) {
    if (count == 0) {
    strValues = document.choiceForm.choiceBox.options[i].value;
    }
    else {
    strValues = strValues + "," + document.choiceForm.choiceBox.options[i].value;
    }
    count++;
       }
    }
    if (strValues.length == 0) {
    alert("您没有选择任何内容");
    }
    else {
    alert("您选择的内容如下:\r\n"+"第" + strValues+"条");
       }
    }
    //  End -->
    </script>
    <center>
    <form name="choiceForm">
    <table border=0>
    <tr>
            <td valign="top" width=175> 
              <div align="center">可选内容:<br>
                <select name="available" onchange="moveOver();" size=10>
                  <option value="1">内容一</option>
                  <option value="2">内容二</option>
                  <option value="3">内容三</option>
                  <option value="4">内容四</option>
                  <option value="5">内容五</option>
                  <option value="6">内容六</option>
                  <option value="7">内容七</option>
                  <option value="8">内容八</option>
                  <option value="9">内容九</option>
                  <option value="10">内容十</option>
                </select>
              </div>
            </td>
            <td valign="top"> 
              <div align="center">你的选择:<br>
                <select multiple name="choiceBox" style="width:150;" size="10">
                </select>
              </div>
            </td>
    </tr>
    <tr>
            <td colspan=2 height=10> 
              <div align="center">
                <input type="button" value="删除" onclick="removeMe();">
                <input type="button" value="结果" onclick="saveMe();">
              </div>
            </td>
    </tr>
    </table>
    </form>
    </center>
    </body>
    </html>
      

  2.   

    <table border=0 cellpadding=0 cellspacing=0><form name=meizz>
      <tr><td>
        <select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
          <option value=A>aaaaaaaaaa
          <option value=B>bbbbbbbbbb
          <option value=C>cccccccccc
          <option value=D>dddddddddd
          <option value=E>eeeeeeeeee
          <option value=F>ffffffffff
          <option value=G>gggggggggg
          <option value=H>hhhhhhhhhh
        </select></td>
      <td width=40 align=center>
        <input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
        <input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
      </td><td>
        <select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
        </select>
      </td></tr></form>
    </table><script language="JavaScript"><!--
    function moveOption(e1, e2){
        try{
            var e = e1.options[e1.selectedIndex];
            e2.options.add(new Option(e.text, e.value));
            e1.options.remove(e1.selectedIndex);
        }   catch(e){}
    }
    //--></script>
      

  3.   

    <table>
    <tr>
    <td valign=top>
    <select name=s1 multiple size=4 style="width:100">
    <option value=1>aaaaaa
    <option value=2>bbbbbb
    <option value=3>cccccc
    <option value=4>dddddd
    <option value=5>eeeeee
    <option value=6>ffffff
    <option value=7>gggggg
    <option value=8>hhhhhh
    </select>
    </td>
    <td valign=middle align=center>
    <input type=button name=b4 value=">" onClick="move(1)"><br>
    <input type=button name=b5 value="<" onClick="move(2)">
    </td>
    <td valign=top>
    <select name=s2 multiple size=4 style="width:100">
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <input type=button name=b1 value=向上 onClick="up()">
    <input type=button name=b2 value=向下 onClick="down()">
    </td>
    <td>
    <input type=button name=b3 value=查看 onClick="show()">
    </td>
    <td>
    </td>
    </tr>
    </table><script>
    function up() {
      s = document.all.s1;
      v = new Array();
      for(i=0;i<s.length-1;i++) {
        if(! s.options[i].selected && s.options[i+1].selected) {
          v.value = s.options[i].value;
          v.text = s.options[i].text;
          v.selected = s.options[i].selected;
          s.options[i].value = s.options[i+1].value;
          s.options[i].text = s.options[i+1].text;
          s.options[i].selected = s.options[i+1].selected;
          s.options[i+1].value = v.value;
          s.options[i+1].text = v.text;
          s.options[i+1].selected = v.selected;
        }
      }
    }function down() {
      s = document.all.s1;
      v = new Array();
      for(i=s.length-1;i>0;i--) {
        if(! s.options[i].selected && s.options[i-1].selected) {
          v.value = s.options[i].value;
          v.text = s.options[i].text;
          v.selected = s.options[i].selected;
          s.options[i].value = s.options[i-1].value;
          s.options[i].text = s.options[i-1].text;
          s.options[i].selected = s.options[i-1].selected;
          s.options[i-1].value = v.value;
          s.options[i-1].text = v.text;
          s.options[i-1].selected = v.selected;
        }
      }
    }function show() {
      s = document.all.s1;
      v = "";
      for(i=0;i<s.length;i++)
        v += s.options[i].value + ":" + s.options[i].text + "\n";
      alert(v);
    }function move(m) {
      if(m == 1) {
        ss1 = document.all.s1;
        ss2 = document.all.s2;
      }
      if(m == 2) {
        ss1 = document.all.s2;
        ss2 = document.all.s1;
      }
      v = new Array();
      k = 0;
      for(i=0;i<ss1.length;i++) {
        if(ss1.options[i].selected) {
          ss2.options[ss2.length] = new Option(ss1.options[i].text,ss1.options[i].value);
          v[k] = i;
          k++;
        }
      }
      for(i=v.length-1;i>=0;i--)
        ss1.options[v[i]] = null;
    }
    </script>
      

  4.   

    在楼上的兄弟上面改了一下
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=unicode">
    <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
    <BODY><table>
    <tr>
    <td valign=top>
    <select name=s1 multiple size=4 style="WIDTH: 82px; HEIGHT: 167px">
    <option value=1>aaaaaa
    <option value=2>bbbbbb
    <option value=3>cccccc
    <option value=4>dddddd
    <option value=5>eeeeee
    <option value=6>ffffff
    <option value=7>gggggg
    <option value=8>hhhhhh</option>
    </select>
    </td>
    <td valign=center align=middle>
    <input type=button name=b4 value=">" onClick="move(1)"><br>
    <input type=button name=b5 value="<" onClick="move(2)">
    </td>
    <td valign=top>
    <select name=s2 multiple size=4 style="WIDTH: 99px; HEIGHT: 158px">
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <input type=button name=b1 value=向上 onClick="up()">
    <input type=button name=b2 value=向下 onClick="down()">
    </td>
    <td>
    <input type=button name=b3 value=查看 onClick="show()">
    </td>
    <td>
    </td>
    </tr>
    </table><script>
    function up() {
      s = document.all.s1;
      v = new Array();
      for(i=0;i<s.length-1;i++) {
        if(! s.options[i].selected && s.options[i+1].selected) {
          v.value = s.options[i].value;
          v.text = s.options[i].text;
          v.selected = s.options[i].selected;
          s.options[i].value = s.options[i+1].value;
          s.options[i].text = s.options[i+1].text;
          s.options[i].selected = s.options[i+1].selected;
          s.options[i+1].value = v.value;
          s.options[i+1].text = v.text;
          s.options[i+1].selected = v.selected;
        }
      }
    }function down() {
      s = document.all.s1;
      v = new Array();
      for(i=s.length-1;i>0;i--) {
        if(! s.options[i].selected && s.options[i-1].selected) {
          v.value = s.options[i].value;
          v.text = s.options[i].text;
          v.selected = s.options[i].selected;
          s.options[i].value = s.options[i-1].value;
          s.options[i].text = s.options[i-1].text;
          s.options[i].selected = s.options[i-1].selected;
          s.options[i-1].value = v.value;
          s.options[i-1].text = v.text;
          s.options[i-1].selected = v.selected;
        }
      }
    }function show() {
      s = document.all.s1;
      v = "";
      for(i=0;i<s.length;i++)
        v += s.options[i].value + ":" + s.options[i].text + "\n";
      alert(v);
    }function move(m) {
      if(m == 1) {
        ss1 = document.all.s1;
        ss2 = document.all.s2;
      }
      if(m == 2) {
        ss1 = document.all.s2;
        ss2 = document.all.s1;
      }
      
      v = new Array();
      k = 0;
      for(i=0;i<ss1.length;i++) {
        if(ss1.options[i].selected) {
          ss2.options[ss2.length] = new Option(ss1.options[i].text,ss1.options[i].value);
          ss2.options[ss2.length-1].selected = true // add By cpp2017
          v[k] = i;
          k++;
        }
      }
      for(i=v.length-1;i>=0;i--)
        ss1.options[v[i]] = null;
    }
    </script>
    </BODY></HTML>