关于一个客户端的问题！！

HTML code
<select multiple="multiple" id="userid" style="width:200px; height:260px;">
    <option>张三</option>
    <option>李四</option>
</select>
<div>
   <span id="add">选中添加到右边&gt;&gt;</span>
   <span id="add_all">全部添加到右边&gt;&gt;</span>
</div>
<select multiple="multiple" id="userid2" style="width:200px; height:260px;">
    
</select>
<div>
    <span id="remove">&lt;&lt;选中删除到左边</span>
    <span id="remove_all">&lt;&lt;全部删除到左边</span>
</div>
   jquery代码如下：
JScript code
$('#add').click(function(){
    alert("aaa");
    var $options=$('#userid option:selected');
    var remove = $options.remove();
    $remove.appendTo('#userid2');
})最重效果 ：
我想 选中添加到右边>> 点击这个后 刚才所选的 就跑到右边去了 在左边 这些选择的也会消除。但是现在貌似我点击 一点反应都没有！！大虾帮忙！！！

解决方案 »

  1.   


    <html>
    <head>
    <title>MultiSelects </title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script>
    <!--
    $(function(){
      $("#s1 option:first,#s2 option:first").attr("selected",true);
     
      $("#s1").dblclick(function(){
        var alloptions = $("#s1 option");
        var so = $("#s1 option:selected");
     if(so === null || so == "undefined"){
      return;
     }
     try{
         var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);
        }catch(e){
         return;
        }
        $("#s2").append(so);
      });
     
      $("#s2").dblclick(function(){
        var alloptions = $("#s2 option");
        var so = $("#s2 option:selected");
     if(so === null || so == "undefined"){
      return;
     }
        try{
         var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);
        }catch(e){
         return;
        }
        $("#s1").append(so);
      });
     
      $("#add").click(function(){
        var alloptions = $("#s1 option");
        var so = $("#s1 option:selected");
        var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);
       
        $("#s2").append(so);
      });
     
      $("#remove").click(function(){
        var alloptions = $("#s2 option");
        var so = $("#s2 option:selected");
       
        var a = (so.get(so.length-1).index == alloptions.length-1)? so.prev().attr("selected",true):so.next().attr("selected",true);
       
        $("#s1").append(so);
      });
     
      $("#addall").click(function(){
        $("#s2").append($("#s1 option").attr("selected",true));
      });
     
      $("#removeall").click(function(){
        $("#s1").append($("#s2 option").attr("selected",true));
      });
     
      $("#s1up").click(function(){
        var so = $("#s1 option:selected");
        if(so.get(0).index!==0){
          so.each(function(){
              $(this).prev().before($(this));
          });
        }
      });
     
      $("#s1down").click(function(){
        var alloptions = $("#s1 option");
        var so = $("#s1 option:selected");
       
        if(so.get(so.length-1).index!=alloptions.length-1){
          for(i=so.length-1;i>=0;i=1-1)
          {
            var item = $(so.get(i));
            item.insertAfter(item.next());
          }
        }
      });
     
      $("#s2up").click(function(){
        var so = $("#s2 option:selected");
        if(so.get(0).index!==0){
          so.each(function(){
              $(this).prev().before($(this));
          });
        }
      });
     
      $("#s2down").click(function(){
        var alloptions = $("#s2 option");
        var so = $("#s2 option:selected");
       
        if(so.get(so.length-1).index!=alloptions.length-1){
          for(i=so.length-1;i>=0;i--)
          {
            var item = $(so.get(i));
            item.insertAfter(item.next());
          }
        }
      });
    });
    -->
    </script>
    </head>
    <body>
    <table width="288" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="29">
          <input type="button" name="s1up" id="s1up" value="up" /><br />
         <input type="button" name="s1down" id="s1down" value="down"/>
        </td>
        <td width="100">
         <select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">
           <option value="opt01">option01</option>
           <option value="opt02">option02</option>
           <option value="opt03">option03</option>
           <option value="opt04">option04</option>
           <option value="opt05">option05</option>
           <option value="opt06">option06</option>
           <option value="opt07">option07</option>
           <option value="opt08">option08</option>
           <option value="opt09">option09</option>
           <option value="opt10">option10</option>
         </select>
        </td>
        <td width="37" align="center"><input type="button" name="addall" id="addall" value="&gt;|" /><br /><input type="button" name="add" id="add" value="&gt;&gt;" /><br /><input type="button" name="remove" id="remove" value="&lt;&lt;" /><br /><input type="button" name="removeall" id="removeall" value="|&lt;" /></td>
        <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">
        </select></td>
        <td width="119">
          <input type="button" name="s2up" id="s2up" value="up" /><br />
        <input type="button" name="s2down" id="s2down" value="down" /></td>
      </tr>
    </table>
    </body>
    </html>
    网上的一个例子