如何两个select 里的值互传

左边一个select 选中之后点击 “《《” 把值转给右边的select里。选中右边select已有的值点击“》》” 把右边的值删除。
左边select的值是动态拿到的。右边的select值最后要转给后台。哪位高人指点。控件是服务器控件。谢谢

解决方案 »

  1.   

    最简单的二个下拉菜单连动范例 
      <select  onchange='ok(this)'  id=a> <option>音乐 <option>电影 </select>  
      <select  id=b> </select>  
      <script>  
      function  ok(objs){  
      if(objs.options[objs.selectedIndex].text=="音乐")b.outerHTML=" <select  id=b> <option  selected>音乐1 <option>音乐2"  
      if(objs.options[objs.selectedIndex].text=="电影")b.outerHTML=" <select  id=b> <option  selected>电影1 <option>电影2"  
      }ok(a)  
      </script>  
      

  2.   


    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>jQuery下拉框的应用</title>
       <style type="text/css">
        span{
         background:#aabbff;
        }
        .spanUp{
         background:#aa00bb;
        
        }
        .spanDown{
         background:#ffffff;
         border:1px; 
         border-width:1px;
        }
       </style>
       <script type="text/javascript" src="jquery-1.3.2.js"></script>
       <script type="text/javascript">
        $(function(){
         ////把选中的移到select2中
        $("#add").click(function(){
         //var $select1=$("#select1 option:selected").remove();
        // $("#select2").append($select1);
         $("#select1 option:selected").appendTo("#select2");
        });
        //全部移到select2中
        $("#add_all").click(function(){
         $("#select1 option").appendTo("#select2");
        });
        //把选中的移到select1中
        $("#remove").click(function(){
         $("#select2 option:selected").appendTo("#select1");
        });
        //全部移到select1中
        $("#remove_all").click(function(){
         $("#select2 option").appendTo("#select1");
        });
       
        $("span").hover(function(){
         $(this).addClass("spanUp");
        },function(){
         $(this).removeClass("spanUp");
        
        });
    });
       </script>
    </head>
    <body>
    <div class="centent">
       <select id="select1" multiple style="width:50px; height:160px;">
        <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>
        <option value="8">选择8</option>
       </select>
       <div>
        <span id="add">选中添加&gt;</span>
        <span id="add_all">全部添加&gt;&gt;</span>
       </div>
    </div>
    <div class="centent">
       <select id="select2" multiple style="width:50px; height:160px;">
       
       </select>
       <div>
        <span id="remove">选中删除&lt;</span>
        <span id="remove_all">全部删除&lt;&lt;</span>
       </div>
    </div>
    </body>
    </html>
      

  3.   

    <select  onchange='ok(this)'  id=a> <option>音乐 <option>电影 </select> 
      <select  id=b> </select> 
      <script> 
      function  ok(objs){ 
      if(objs.options[objs.selectedIndex].text=="音乐")b.outerHTML=" <select  id=b> <option  selected>音乐1 <option>音乐2" 
      if(objs.options[objs.selectedIndex].text=="电影")b.outerHTML=" <select  id=b> <option  selected>电影1 <option>电影2" 
      }ok(a) 
      </script>