<HTML>
<HEAD>
<TITLE> emu </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function exchange(v){
elm1=s1[v];
elm2=s1[1-v];
for (var i=elm1.length-1;i>-1;i--){
if (elm1.options[i].selected){
elm2.appendChild(elm1.removeChild(elm1.options[i]))
}
}
if (elm1.length>0){
elm1.appendChild(elm1.removeChild(elm1.lastChild))
}
}
//-->
</SCRIPT>
</HEAD><BODY>
<select size=10 id=s1 style="width:100" multiple>
<option>test0</option>
<option>test1</option>
<option>test2</option>
<option>test3</option>
<option>test4</option>
<option>test5</option>
<option>test6</option>
<option>test7</option>
<option>test8</option>
<option>test9</option>
</select>
<select size=10 id=s1 style="width:100" multiple></select>
<BR> &nbsp; &nbsp; &nbsp;
<input type=button value=">>" onclick="exchange(0)"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input type=button value="<<" onclick="exchange(1)">
</BODY>
</HTML>

解决方案 »

  1.   

    www.51job.com里的求职意向里有这样的代码演示,你可看看
      

  2.   

    稍做了点改动,现在可以在netScape下面完成一样的功能了:<HTML>
    <HEAD>
    <TITLE> emu </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function exchange(v){
    elm1=document.getElementsByName("s1")[v];
    elm2=document.getElementsByName("s1")[1-v];
    for (var i=elm1.length-1;i>-1;i--){
    op=elm1.options[i];
    if (op.selected){
    elm2.options[elm2.length]=new Option(op.text,op.value);
    elm1.options[i]=null;
    }
    }
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <select size=10 name=s1 style="width:100" multiple>
    <option>test0</option>
    <option>test1</option>
    <option>test2</option>
    <option>test3</option>
    <option>test4</option>
    <option>test5</option>
    <option>test6</option>
    <option>test7</option>
    <option>test8</option>
    <option>test9</option>
    </select>
    <select size=10 name=s1 style="width:100" multiple></select>
    <BR> &nbsp; &nbsp; &nbsp;
    <input type=button value=">>" onclick="exchange(0)"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <input type=button value="<<" onclick="exchange(1)">
    </BODY>
    </HTML>
    IE5,NS6.2下通过。
      

  3.   

    没想到在我写下面这代码的时候,就已有几位朋友回复了,我还是贴出来吧!<select id="select1" size="10" style="width:100" multiple>
      <option>第一行</option>
      <option>第二行</option> 
      <option>第三行</option>
      <option>第四行</option>
      <option>第五行</option>
      <option>第六行</option>
    </select><select id="select2" size="10" style="width:100" multiple>
    </select>
    <button onClick="btnAdd_Click()">添加</button>
    <button onClick="btnDel_Click()">删除</button>
    <script language="JavaScript">
      //添加
      function btnAdd_Click(){
        AddOrDel(select1, select2)
      }
      
      
      //删除
      function btnDel_Click(){
        AddOrDel(select2, select1)
      }
      
      function AddOrDel(selObj1, selObj2){
        var i, iCount
        iCount = selObj1.options.length
        for (i=iCount-1; i>=0; i--){
          objOption = selObj1.options[i]
          if (objOption.selected){
            selObj2.appendChild(objOption)
          }
        }
      }
    </script>
      

  4.   

    kegumingxin(刻骨铭心) :你的有bugs,测一下,谢谢回复;
      

  5.   

    请问有什么BUG?我的浏览器是IE6,我反复测试过没找到问题,请指教!
      

  6.   

    别人写的
    <br><br><br><br>
    自由移动option位置关系<br><Br><br>
    <script>
    function move(bool)
    {
    i=bool=="up"?-1:1;
    myvalue=document.all.mysel.options[document.all.mysel.selectedIndex+i].value;
    mytext=document.all.mysel.options[document.all.mysel.selectedIndex+i].text;
    document.all.mysel.options[document.all.mysel.selectedIndex+i].value=document.all.mysel.options[document.all.mysel.selectedIndex].value;
    document.all.mysel.options[document.all.mysel.selectedIndex+i].text=document.all.mysel.options[document.all.mysel.selectedIndex].text;
    document.all.mysel.options[document.all.mysel.selectedIndex].value=myvalue;
    document.all.mysel.options[document.all.mysel.selectedIndex].text=mytext;
    }
    function set()
    {
    if(document.all.mysel.selectedIndex==0)
    document.all.up.disabled=true;
    else
    document.all.up.disabled=false;
    if(document.all.mysel.selectedIndex==document.all.mysel.options.length-1)
    document.all.down.disabled=true;
    else
    document.all.down.disabled=false;
    }
    </script>
    <body onload=set()>
    <select id=mysel size=4 onchange=set()>
    <option value=1 selected>1
    <option value=2>2
    <option value=3>3
    <option value=4>4
    </select>
    <input type=button value=up id=up onclick=move("up")>
    <input type=button value=down id=down onclick=move("down")></body>
    </html>
      

  7.   

    kegumingxin(刻骨铭心)的bug其实不是他的bug而是IE最臭名昭著的bug之一。在我贴的第一段代码里面用了这样一段代码来对付它:if (elm1.length>0){
    elm1.appendChild(elm1.removeChild(elm1.lastChild))
    }
      

  8.   

    kegumingxin(刻骨铭心) :那就是了,我用的是ie5.00
      

  9.   

    谢谢指教!我把上移和下移的功能加上了,麻烦你们再测试一下!<select id="select1" size="10" style="width:100" multiple>
      <option>第一行</option>
      <option>第二行</option> 
      <option>第三行</option>
      <option>第四行</option>
      <option>第五行</option>
      <option>第六行</option>
    </select><select id="select2" size="10" style="width:100" multiple>
    </select>
    <button onClick="btnAdd_Click()">添加</button>
    <button onClick="btnDel_Click()">删除</button>
    <button onClick="ItemUp()">上移</button>
    <button onClick="ItemDown()">下移</button>
    <script language="JavaScript">
      //添加
      function btnAdd_Click(){
        AddOrDel(select1, select2)
      }
      
      
      //删除
      function btnDel_Click(){
        AddOrDel(select2, select1)
      }
      
      function AddOrDel(selObj1, selObj2){
        var i, iCount
        iCount = selObj1.options.length
        for (i=iCount-1; i>=0; i--){
          objOption = selObj1.options[i]
          if (objOption.selected){
            selObj2.appendChild(selObj1.removeChild(objOption))
          }
        }
      }
      function ItemUp(){
        var iIndex = select1.selectedIndex
        if (iIndex <= 0) return
        select1.insertBefore(select1.options[iIndex], select1.options[iIndex - 1])
      }
      
      
      
      function ItemDown(){
        var iIndex = select1.selectedIndex
        if (iIndex == -1 || iIndex == select1.options.length - 1) return
        select1.insertBefore(select1.options[iIndex], select1.options[iIndex + 2])
      }
      
    </script>
      

  10.   

    我的也是ie5,不知bug是什么
    <select name=sel1 multiple size=6>
    <option>1</option>
    <option>3</option>
    <option>5</option>
    <option>2</option>
    <option>4</option>
    <option>6</option>
    </select>
    <select name=sel2 multiple size=6>
    </select>
    <input type=button value=">>" onclick=moveTo(sel1,sel2)>
    <input type=button value="<<" onclick=moveTo(sel2,sel1)>
    <input type=button value="up" onclick=move(sel1,"up")>
    <input type=button value="down" onclick=move(sel1,"down")>
    <script>
    //**freefalcon**//
    function moveTo(sel1,sel2){
      for(i=sel1.options.length-1;i>=0;i--)
        if(sel1.options[i].selected){
           op=sel1.options[i].cloneNode(true);
           sel2.appendChild(op);
           sel1.options[i]=null;
        }
    }
    function move(sel,dir){
      if(dir=="up")  
        for(i=0;i<sel.options.length;i++)
         if(sel.options[i].selected){
             if(i==0)break;       
             sel.options[i].swapNode(sel.options[i-1])         
         }
      if(dir=="down")
        for(i=sel.options.length-1;i>=0;i--)
         if(sel.options[i].selected){
             if(i==sel.options.length-1)break;       
             sel.options[i].swapNode(sel.options[i+1]);
         }   
    }
    </script>
      

  11.   

    kegumingxin(刻骨铭心)的上下移动对于多选的情况不支持
    也请大家测试一下我的,thanks
      

  12.   

    freefalcon(心宇) :谢谢,结了
      

  13.   

    kegumingxin(刻骨铭心) :在ie5.0下还是不行添加删除,在ie6.0下是可以的
      

  14.   

    <HEAD><SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    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;
       }
    }
    //  End -->
    </script></HEAD><!-- STEP TWO: Copy this code into the BODY of your HTML document  --><BODY><form name="combo_box">
    <table><tr><td>
    <select multiple size="10" name="list1" style="width:150">
    <option value="12">Alabama</option>
    <option value="54">Alaska</option>
    <option value="65">Arizona</option>
    <option value="45">Arkansas</option>
    <option value="2">California</option>
    <option value="6">Colorado</option>
    <option value="81">Connecticut</option>
    <option value="5">Delaware</option>
    <option value="23">District of Columbia</option>
    <option value="58">Florida</option>
    <option value="87">Georgia</option>
    <option value="98">Hawaii</option>
    <option value="53">Idaho</option>
    <option value="22">Illinois</option>
    <option value="28">Indiana</option>
    <option value="89">Iowa</option>
    <option value="71">Kansas</option>
    <option value="35">Kentucky</option>
    <option value="85">Louisiana</option>
    <option value="9">Maine</option>
    <option value="7">Maryland</option>
    <option value="77">Massachusetts</option>
    <option value="36">Michigan</option>
    <option value="87">Minnesota</option>
    <option value="66">Mississippi</option>
    <option value="34">Missouri</option>
    <option value="50">Montana</option>
    <option value="20">Nebraska</option>
    <option value="25">Nevada</option>
    <option value="32">New Hampshire</option>
    <option value="27">New Jersey</option>
    <option value="74">New Mexico</option>
    <option value="17">New York</option>
    <option value="3">North Carolina</option>
    <option value="13">North Dakota</option>
    <option value="4">Ohio</option>
    <option value="21">Oklahoma</option>
    <option value="12">Oregon</option>
    <option value="48">Pennsylvania</option>
    <option value="63">Rhode Island</option>
    <option value="82">South Carolina</option>
    <option value="14">South Dakota</option>
    <option value="72">Tennessee</option>
    <option value="49">Texas</option>
    <option value="47">Utah</option>
    <option value="92">Vermont</option>
    <option value="59">Virginia</option>
    <option value="52">Washington</option>
    <option value="41">West Virginia</option>
    <option value="46">Wisconsin</option>
    <option value="95">Wyoming</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>