select多选的时候可以一次移动多个，现在每次只能一个

当在左侧选择多个后，点击添加，一次只能过去一个。
如何修改成一次把选择后的都添加过去？
谢谢了！
代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
var base;function SelectOne() {
  if (form1.beixuan.options.length == 0 || form1.beixuan.selectedIndex < 0) {
    return false;
  }
  base = 0;
  for (var j = 0; j < form1.yixuan.options.length; j++) {
    if (form1.beixuan.options[form1.beixuan.selectedIndex].value == form1.yixuan.options[j].value) {
      base = 1;
      break;
    }
  }
  if (base == 0) {
    var e = document.createElement("OPTION");
    e.value = form1.beixuan.options[form1.beixuan.selectedIndex].value;
    e.text = form1.beixuan.options[form1.beixuan.selectedIndex].text;
    form1.yixuan.options.add(e);
  }
  form1.beixuan.options.remove(form1.beixuan.selectedIndex);
}function BackOne() {
  if (form1.yixuan.options.length == 0 || form1.yixuan.selectedIndex < 0) {
    return false;
  }
  base = 0;
  for (var j = 0; j < form1.beixuan.options.length; j++) {
    if (form1.yixuan.options[form1.yixuan.selectedIndex].value == form1.beixuan.options[j].value) {
      base = 1;
      break;
    }
  }
  if (base == 0) {
    var e = document.createElement("OPTION");
    e.value = form1.yixuan.options[form1.yixuan.selectedIndex].value;
    e.text = form1.yixuan.options[form1.yixuan.selectedIndex].text;
    form1.beixuan.options.add(e);
  }
  form1.yixuan.options.remove(form1.yixuan.selectedIndex);
}
</script>
</head><body>
<form method='post' name='form1' id='form1' onSubmit="return false">
 <table width='100%' cellspacing='1'>
  <tr>
   <td colspan=2 class="p10"><table width='100%' cellspacing='1'>
     <tr align='center'>
      <td><select multiple id='beixuan' name='beixuan' style="display:inline;width:100%;" size='9' rows='9' ondblclick="javascript:SelectOne();">
        <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>
        <option value=6>用户6 [外交部]</option>
        <option value=7>用户7 [外交部]</option>
       </select></td>
      <td valign='center' width='40'>
      <input type="button" value="添加" onClick="javascript:SelectOne();" name="B1"><br /><br />
      <input type="button" value="移除" onClick="javascript:BackOne();" name="B2">
      </td>
      <td class=row><select multiple id='yixuan' name='yixuan' style="display:inline;width:100%;" size=9 rows=9 ondblclick="javascript:BackOne();">
       </select></td>
     </tr>
    </table></td>
  </tr>
 </table>
</form>
</body>
</html>

解决方案 »

  1.   

    当点击添加按钮后,你需要将所有选择了的选项的value值用js读取出来
    这里需要一个数组将所有要提交的数据存起来，，，
      

  2.   

    JS代码：
             function SelectItems()
            {
                var selectItems=document.getElementById("beixuan").options;
                var tranItems=document.getElementById("yixuan").options;
               
                for(var i=0; i < selectItems.length; i++)
                {
                    if(selectItems[i].selected)
                    {
                        //alert(selectItems[i].value);
                        var oOption = document.createElement("OPTION");
                        tranItems.add(oOption);
                        oOption.innerText=selectItems[i].innerText;
                        oOption.value=selectItems[i].value;
                        oOption.selected=true;
                        selectItems.remove(i);
                    }
                }
            }
    就可实现多选的效果
      

  3.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language="javascript">
    var base;function SelectOne() {
      if (form1.beixuan.options.length == 0 || form1.beixuan.selectedIndex < 0) {
        return false;
      }
      var selectCollection = form1.beixuan.options;
      for (var j = 0; j < selectCollection.length; j++) {
    if (selectCollection[j].selected) {
    alert(j);
    var e = document.createElement("OPTION");
    e.value = selectCollection[j].value;
    e.text = selectCollection[j].text;
    form1.yixuan.options.add(e);
      }
      }
      for (var j = 0; j < selectCollection.length; j++) {
    if (selectCollection[j].selected) {
    form1.beixuan.options.remove(selectCollection[j]);
      }
      }
      
    }function BackOne() {
      if (form1.yixuan.options.length == 0 || form1.yixuan.selectedIndex < 0) {
        return false;
      }
      var selectCollection = form1.yixuan.options;
      for (var j = 0; j < selectCollection.length; j++) {
    if (selectCollection[j].selected) {
    alert(j);
    var e = document.createElement("OPTION");
    e.value = selectCollection[j].value;
    e.text = selectCollection[j].text;
    form1.beixuan.options.add(e);
      }
      }
      for (var j = 0; j < selectCollection.length; j++) {
    if (selectCollection[j].selected) {
    form1.yixuan.options.remove(selectCollection[j]);
      }
      }
    }
    </script>
    </head><body>
    <form method='post' name='form1' id='form1' onSubmit="return false">
     <table width='100%' cellspacing='1'>
      <tr>
       <td colspan=2 class="p10"><table width='100%' cellspacing='1'>
         <tr align='center'>
          <td><select multiple id='beixuan' name='beixuan' style="display:inline;width:100%;" size='9' rows='9' ondblclick="javascript:SelectOne();">
            <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>
            <option value=6>用户6 [外交部]</option>
            <option value=7>用户7 [外交部]</option>
           </select></td>
          <td valign='center' width='40'>
          <input type="button" value="添加" onClick="javascript:SelectOne();" name="B1"><br /><br />
          <input type="button" value="移除" onClick="javascript:BackOne();" name="B2">
          </td>
          <td class=row><select multiple id='yixuan' name='yixuan' style="display:inline;width:100%;" size=9 rows=9 ondblclick="javascript:BackOne();">
           </select></td>
         </tr>
        </table></td>
      </tr>
     </table>
    </form>
    </body>
    </html>