本人刚学javascript求高手解答一题目！

  要求是通过js实现单击“》”将左边的内容添加到右边下拉文本框中，也能单击“《”从右边的下拉文本框中将内容还原回来左边:                                     右边：
     乔丹               》                    贝克汉姆     姚明              《                     罗拉尔多
     

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>zell419</title>
    <script type="text/javascript">
        function add(){
            var jordan = document.getElementById("sel1").options[0];
            var newOption   = new Option(jordan.text,jordan);
            document.getElementById("sel2").options.add(newOption);
        }
    </script>
    </head>
    <body>
    <select id="sel1">
    <option value="乔丹">乔丹</option>
    </select>
    <input type="button"  value="》"  onclick="add();" />
    <select id="sel2">
    <option value="贝克汉姆">贝克汉姆</option>
    </select>
    </body>
    </html>这样啊 ？
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <input type="text" id="txt" /><input type="button" id="appendOPT" value="》" />
    <input type="button" id="getOPT" value="《" /><select id="sel">
    <option value="DEFAULT">DEFAULT</option>
    </select><script type="text/javascript">
    document.getElementById('appendOPT').onclick = function() {
    var txt = document.getElementById('txt').value;
    if (txt.length < 1) alert('请输入');
    else {
    var sel = document.getElementById('sel');
    var opt = document.createElement('option');
    opt.value = txt;
    opt.innerHTML = txt;
    sel.appendChild(opt);
    sel.value = txt;
    }
    }
    document.getElementById('getOPT').onclick = function() {
    var SEL = document.getElementById('sel');
    document.getElementById('txt').value = SEL.value;
    SEL.removeChild(SEL.options[SEL.selectedIndex]);
    }
    </script>
    </body>
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
    </head>
    <body>
    <select id="sel1" onchange="xz(this)" style="width:100px; height:100px;" multiple="multiple">
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option>
    <option value="5">55</option>
    <option value="6">66</option>
    </select>
    <select  id="sel2" onchange="zx(this)" style="width:100px; height:100px;"  multiple="multiple">
    </select>
    </body>
    <script>
    function xz(obj)
    {
        document.getElementById('sel2').appendChild(obj.options[obj.selectedIndex]);
    }
    function zx(obj)
    {
        document.getElementById('sel1').appendChild(obj.options[obj.selectedIndex]);
    }
    </script>
    </html>
      

  4.   

    我这里有个例子，不知道是不是你想要的效果。
    http://download.csdn.net/source/3411222
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>无标题文档</title>
    </head><body><table>
    <tr>
    <td>
    <select id="s1" size="8" style="width:100px">
    <option>中国</option>
    <option>美国</option>
    <option>日国</option>
    <option>法国</option>
    <option>德国</option>
    </select>
    </td>
    <td>
    <input type="button" value="<<" onclick='m(document.getElementById("s2"),document.getElementById("s1"))'/>
    </br>
    <input type="button" value=">>" onclick='m(document.getElementById("s1"),document.getElementById("s2"))'/>
    </td>
    <td>
    <select id="s2" size="8"  style="width:100px"></select>
    </td>
    </tr></table><script type="text/javascript">
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2")
    function m(s1,s2)
    {
         var index = s1.selectedIndex;
         var count = s1.options.length;
         if(index==-1) return;
         var opt = s1.options[index]
         if(index==count-1) index = index -1
         else index = index + 1
         if(index >= 0) s1.options[index].selected=true
         s2.appendChild(opt);      
    }
    </script></body>
    </html>
      

  6.   

    刚刚搞定，自认为比较满意的一个版本<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
    </head>
    <body>
    <select id="sel1" style="width:100px; height:120px;" multiple="multiple">
    <option value="1">11</option>
    <option value="2">22</option>
    <option value="3">33</option>
    <option value="4">44</option>
    <option value="5">55</option>
    <option value="6">66</option>
    </select>
    <input type="button" onclick="zh()"  value="<--&nbsp;&nbsp;&nbsp;&nbsp;-->"/>
    <select id="sel2"  style="width:100px; height:120px;"  multiple="multiple">
    </select>
    </body>
    <script type="text/javascript">
    var sel1=document.getElementById('sel1');
    var sel2=document.getElementById('sel2');
    function zh()
    {   
       if(sel1.selectedIndex>sel2.selectedIndex)
       {
            sel2.appendChild(sel1.options[sel1.selectedIndex]);
            sel2.selectedIndex=-1;
       }
       if(sel1.selectedIndex<sel2.selectedIndex)
       {
            sel1.appendChild(sel2.options[sel2.selectedIndex]);
            sel1.selectedIndex=-1;
       }
    }
    </script>
    </html>