请教各位大虾如何用js实现在一个页面中点击一个按钮动态添加一个select multiple框（点击次数为止，每点击一次增加一个select控件）！急

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
function addSrcToDestList() {
destList = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {var found = false;
for(var count = 0; count < len; count++) {
if (destList.options[count] != null) {
if (srcList.options[i].text == destList.options[count].text) {
found = true;
break;
      }
   }
}
if (found != true) {
destList.options[len] = new Option(srcList.options[i].text);
len++;
         }
      }
   }
}function deleteFromDestList() {
var destList  = window.document.forms[0].destList;
var len = destList.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
destList.options[i] = null;
      }
   }
}
// -->
</SCRIPT>
</head>
<body>
<center>
<input type="button" value="add" onclick="document.all.x1.style.display='';document.all.x2.style.display='';">
<form method="POST">
<table bgcolor="#FFFFCC"><tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center"  id="x1" style="display:none">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69" id="x2" style="display:none">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

解决方案 »

  1.   

    也可以<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    <!--
    function a()
    {
    s=document.createElement("<SELECT name='destList'></select>")
    s.size=6s.multiple = true
    document.all.x.appendChild(s)
    }
    function addSrcToDestList() {
    destList = window.document.forms[0].destList;
    srcList = window.document.forms[0].srcList;
    var len = destList.length;
    for(var i = 0; i < srcList.length; i++) {
    if ((srcList.options[i] != null) && (srcList.options[i].selected)) {var found = false;
    for(var count = 0; count < len; count++) {
    if (destList.options[count] != null) {
    if (srcList.options[i].text == destList.options[count].text) {
    found = true;
    break;
          }
       }
    }
    if (found != true) {
    destList.options[len] = new Option(srcList.options[i].text);
    len++;
             }
          }
       }
    }function deleteFromDestList() {
    var destList  = window.document.forms[0].destList;
    var len = destList.options.length;
    for(var i = (len-1); i >= 0; i--) {
    if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
    destList.options[i] = null;
          }
       }
    }
    // -->
    </SCRIPT>
    </head>
    <body>
    <center>
    <input type="button" value="add" onclick="a()">
    <form method="POST">
    <table bgcolor="#FFFFCC"><tr>
    <td bgcolor="#FFFFCC" width="85">
    <select size="6" name="srcList" multiple>
    <option value="1">Item 1
    <option value="2">Item 2
    <option value="3">Item 3
    <option value="4">Item 4
    <option value="5">Item 5
    <option value="6">Item 6
    </select>
    </td>
    <td bgcolor="#FFFFCC" width="74" align="center">
    <input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
    <br><br>
    <input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
    </td>
    <td bgcolor="#FFFFCC" width="69" id="x"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
      

  2.   

    非常感谢 net_lover(孟子E章)给出的解决办法，解决了一部分的问题。
    但是现在仍然存在一个关键的问题，就是生成的新的select都是同名的，无法区分。
    能否让这个新生成的控件都不同名，而且可以分别取到任何一个对象。
    我试了将select的名字设为变量名，但是取这个对象时js不认变量。急盼解决办法！
      

  3.   

    设置一个全局计数变量,
    count = 0; 每次新增就加1。
    然后，名字就可以 name = "selectName" + count;
    这样就不会重名了。
    这只是一种解决方法，根据实际情况，你可以把count换成其他的有意义的符号.
      

  4.   

    <html>
    <body>
    <form>
    <select id='sel' multiple>
      <option value='1'>1</option>
      <option value='2'>2</option>
    </select>
    <br>
    <input type='button' value='add' onclick='_addNewSelect();'>
    <input type='button' value='check' onclick='_checkObject();'>
    <div id='_new'>
    </div>
    <script>
    function _addNewSelect()
    {
      var newSel=document.createElement("select");
      if (document.all._new.childNodes.length) 
        newSel.id="sel"+(document.all._new.childNodes.length);
      else
        newSel.id="sel0";
      newSel.multiple="true";
      var newOpt;
      for (var i=0; i<document.all.sel.options.length; i++)
      {
        newSel.options[i]=new Option(document.all.sel.options[i].text);
      }
      document.all._new.appendChild(newSel);
      //alert(newSel.outerHTML);
    }
    function _checkObject()
    {
      var _preName="document.all.sel";
      for (var i=0; i<document.all._new.childNodes.length; i++)
        alert(eval(_preName+i+".outerHTML"));
    }
    </script>
    </form>
    </body>
    </html>