<title>移动、交换SELECT内容</title>
<style type="text/css">
<!--
body { background-color:#CECECE;}
button { font-family:"webdings";font-size:10px;width:17px;height:15px;line-height:4px;}
select { font-family:"Verdana";font-size:11px;}
-->
</style>
<script>var createDate = "2003.8.23";</script>
<script language="javascript" defer>
//添加事件
fromSel.attachEvent("ondblclick",new Function("MoveOptions(fromSel,toSel)"))
toSel.attachEvent("ondblclick",new Function("MoveOptions(toSel,fromSel)"))
LeftButton.attachEvent("onmouseup",new Function("MoveOptions(fromSel,toSel)"))
RightButton.attachEvent("onmouseup",new Function("MoveOptions(toSel,fromSel)"))
//移动函数
function MoveOptions(oFrom,oTo) {
for (var i=1;i<oFrom.length;i++) {
if (oFrom.options[i].selected) {
oTo.options[oTo.length] = new Option(oFrom.options[i].text,oFrom.options[i].value);
oFrom.options[i--] = null;
if (event.type=="dblclick") return;
}
}
}
//交换函数
function SwapOptions(obj,direction) {
var objIndex = obj.selectedIndex;
var swapIndex=direction=="up"?objIndex-1:objIndex+1;
if ((swapIndex==obj.length&&direction=="down")||(swapIndex==-1&&direction=="up")||obj.selectedIndex==0||swapIndex<=0) return;
obj.options[objIndex].swapNode(obj.options[swapIndex]);
}
</script>
<body>
<table width="165" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<button onmouseup="SwapOptions(fromSel,'up')">5</button>
<button onmouseup="SwapOptions(fromSel,'down')">6</button>
</td></tr>
<tr><td>
<select id="fromSel" multiple size=10>
<option>---请选择要进入的网站---</option>
<option>CSND.net</option>
<option>MSND.com</option>
<option>Blueidea.com</option>
<option>51job.com</option>
<option>Yahoo.com</option>
<option>Pchome.net</option>
<option>Sina.com.cn</option>
</select>
</td></tr>
<tr><td align="center">
<button id="RightButton">7</button>
<button id="LeftButton">8</button>
</td></tr>
<tr><td>
<select id="toSel" multiple size=10>
<option>---请选择感兴趣的网站---</option>
</select>
</td></tr>
<tr><td align="right">
<button onmouseup="SwapOptions(toSel,'up')">5</button>
<button onmouseup="SwapOptions(toSel,'down')">6</button>
</td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript" SRC="createDate.js"></SCRIPT>
<br>
<SCRIPT LANGUAGE="JavaScript" SRC="list.js"></SCRIPT>

解决方案 »

  1.   

    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    function func(){
    var obj = document.form1.select1;
    if(document.form1.select2.options.length>0){
    document.form1.select2.options.length = 0;
    }
    for(i=0;i<obj.options.length;i++){
    if(obj.options[i].selected){
      tmp = obj.options[i]
      document.form1.select2.add(new Option(tmp.text,tmp.value));
    }
    }
    }
    function remove(){
    var obj = document.form1.select2;
    for(i=0;i<obj.options.length;i++){
    if(obj.options[i].selected){
      obj.options[i].removeNode();
    }
    }}
    </script></head>
    <body>
    <form name="form1">
    <table width="67%" border="0" align="center">
      <tr>
          <td width="29%">
      <select name="select1" size="20" multiple style="width:200">
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
           </select></td>
        <td width="11%">
    <input name="button1" type="button" value="》》"  onclick="func()"><br><br>
    <input name="button2" type="button" value="《《"  onclick="remove()"><br><br>
    </td>
          <td width="60%"> 
      <select name="select2" size="20" multiple style="width:200">
         </select></td>
      </tr>
    </table>
      <div align="center">
        <input name="butNext" type="button" value="上一步">
        &nbsp;&nbsp; 
        <input name="butBfore" type="button"  value="下一步">
      </div>
    </form>
    </body>
    </html>
      

  2.   

    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    <!-- 你看一下是不是这样 -->
    function func(){
      var form = document.forms['form']
      var tmpList = []
      if (form.select1.selectedIndex < 0)
          return
      for (var i=0;i<form.select1.length;i++)
          if (form.select1.options[i].selected)
             tmpList[tmpList.length] = form.select1.options[i].text
      alert (tmpList)
    }
    </script></head>
    <body>
    <form name='form'>
    <table width="67%" border="0" align="center">
      <tr>
          <td width="29%">
      <select name="select1" size="20" multiple style="width:200">
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
           </select></td>
        <td width="11%">
    <input name="button1" type="button" value="》》"  onclick="func()"><br><br>
    <input name="button2" type="button" value="《《"><br><br>
        </td>
        <td width="60%"> 
    <select name="select2" size="20" multiple style="width:200">
            </select></td>
      </tr>
    </table>
      <div align="center">
        <input name="butNext" type="button" value="上一步">
        &nbsp;&nbsp; 
        <input name="butBfore" type="button"  value="下一步">
      </div>
    </form>
    </body>
    </html>
      

  3.   

    楼上的程序符合你的要求啊,只要选的时候按着ctrl就可以了!
      

  4.   

    倒,不是楼上的,这个好象只能弹alert么,是再上面的
      

  5.   

    哥们,是不是我没有说清楚啊!如下:静态网页:<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    function func(){
    alert(window.form.select1.length);
    }
    </script></head>
    <body>
    <form name="form">
    <table width="67%" border="0" align="center">
      <tr>
          <td width="29%">
      <select name="select1" size="20" multiple style="width:200">
              <option value="xxxxxx">A_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">B_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;B_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;B_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;B_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;B_table.c</option>
              <option value="xxxxxx">C_table</option>
              <option value="xxxxxx">&nbsp;&nbsp;C_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;C_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;C_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;C_table.c</option>
           </select></td>
        <td width="11%">
    <input name="button1" type="button" value="》》"  onclick="func()"><br><br>
    <input name="button2" type="button" value="《《"><br><br>
    </td>
          <td width="60%"> 
      <select name="select1" size="20" multiple style="width:200">
              <option value="xxxxxx">&nbsp;&nbsp;A_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.b</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;A_table.c</option>
              <option value="xxxxxx">&nbsp;&nbsp;B_table.a</option>
              <option value="xxxxxx">&nbsp;&nbsp;C_table.a</option>
         </select></td>
      </tr>
    </table>
      <div align="center">
        <input name="butNext" type="button" value="上一步">
        &nbsp;&nbsp; 
        <input name="butBfore" type="button"  value="下一步">
      </div>
    </form>
    </body>
    </html>
    注:我只选中A_table项,它的下一级都传到右边了,我如果只选中B_table.a只传过去B_table.a到右边,其他的都相同。如上。谢谢哥们
      

  6.   

    ASK: cloudchen(陈系上.net)  除了用jscript外,是不是还用到其它什么的知识,请指教。。
      

  7.   

    把func()改成这样,就可以“左边选中的项(可以多选,也可以单选,也可以分几步选)可以传到右边的对象中,同时左边选中的项不能删除”
    function func()
    {
    var curlength=document.all.select2.options.length;
    for(var i=0;i<document.all.select1.options.length;i++)
    {
    if(document.all.select1.options[i].selected){
     document.all.select2.options[curlength]=new Option("");
     document.all.select2.options[curlength].value=document.all.select1.options[i].value;
     document.all.select2.options[curlength].text=document.all.select1.options[i].text;
     curlength++;
     }
     }
    }
      

  8.   

    这个达到你的要求了,给分,哈哈
    function func()
    {
    var curlength=document.all.select2.options.length;
    for(var i=0;i<document.all.select1.options.length;i++){
    if(document.all.select1.options[i].selected){
     document.all.select2.options[curlength]=new Option("");
    for(var j=0;j<document.all.select2.options.length;j++){
      if(document.all.select1[i].text==document.all.select2[j].text){
    alert(document.all.select1[i].text+ "在右边已经有了");
      }
     }
     document.all.select2.options[curlength].value=document.all.select1.options[i].value;
     document.all.select2.options[curlength].text=document.all.select1.options[i].text;
     curlength++;
     }
     }
    }
      

  9.   

    又改了一下,还有点小问题,你自己看看吧,任务来了,又要忙了,5555
    function func()
    {
    var curlength=document.all.select2.options.length;
    for(var i=0;i<document.all.select1.options.length;i++){
    if(document.all.select1.options[i].selected){
    if(document.all.select2.options.length==0){
    document.all.select2.options[curlength]=new Option("");
    document.all.select2.options[curlength].value=document.all.select1.options[i].value;
    document.all.select2.options[curlength].text=document.all.select1.options[i].text;
    curlength++;
    }
    else{
    for(var j=0;j<document.all.select2.options.length;j++){
    if(document.all.select1[i].text==document.all.select2[j].text){

    alert(document.all.select1[i].text);alert(document.all.select2[j].text);
    alert(document.all.select1[i].text+ "&Ocirc;&Uacute;&Oacute;&Ograve;±&szlig;&Ograve;&Ntilde;&frac34;&shy;&Oacute;&ETH;&Aacute;&Euml;");
    j=document.all.select2.options.length;
    break;
    }
    else{
    document.all.select2.options[curlength]=new Option("");
    document.all.select2.options[curlength].value=document.all.select1.options[i].value;
    document.all.select2.options[curlength].text=document.all.select1.options[i].text;
    curlength++;
    }
    }
    }
    }
    }
    }