select 多选框的移动

两个SELECT框加四个按钮

<s:select size="7" name="product" list="accountVo.productList"   listKey="productId"   listValue="productName"   cssStyle="width:205px;height:300px"/>

                      <input type="button" class="btn all" value="全选&gt;" name="allproduct" />
                      <input type="button" class="btn move" value="&gt;&gt;" name="product" />
                      <input type="button" class="btn move" value="&lt;&lt;" name="addProductList" />
                      <input type="button" class="btn all" value="&lt;全选" name="alladdProductList"/>

<select id="list" size="7" style="width:205px;height:300px" name="addProductList"       multiple="multiple"/>

 

注意：右边的select框一定要加上multiple="multiple" s属性设置多选，不然在提交的时候只能提交第一项

        

JQUERY部分

 

$(function(){
 //单个option选项的左右移动
 $('.move').click(function(){
      var name = $(this).attr('name');     
      var object = $('select[name='+name+']');    
      var value = object.val();    
      var text = object.find("option:selected").text();
      if(value==null){
       return false;
      }
         var count = 0 ;
         for(var i=0 ; i < object.get(0).options.length ; i++ ){
             if(object.get(0).options[i].selected){
                 count++;
             }
         }
         if(count >= 2){
           alert("每次只能选一项！");
           return  false ;
         }
      switch(name){
        case 'product':
            $('<option value='+ value +'>'+ text +'</option>').appendTo('select [name=addProductList]');
            break;
     case 'addProductList':
            $('<option value='+ value +'>'+ text +'</option>').appendTo('select[name=product]');
            break;
      }
     
      object.find("option:selected").remove();
 });

  //全选的移动
 $('.all').click(function(){
    var name = $(this).attr('name');
       switch(name){
        case 'allproduct':
                $('select[name=product] option').each(function(){
                    var value = $(this).val();
                    var text = $(this).text();
                    $('<option value='+ value +'>'+ text +'</option>').appendTo('select[name=addProductList]');
                    $(this).remove();
                });
    break;
     case 'alladdProductList':
             $('select[name=addProductList] option').each(function(){
                    var value = $(this).val();
                    var text = $(this).text();
                    $('<option value='+ value +'>'+ text +'</option>').appendTo('select[name=product]');
                    $(this).remove();
                });
    break;
      }
 });
 
   //在提交的时候要设置全部选中
 $('input[name=account]').click(function(){
     if($('select[name=addProductList] option').length == 0){
       alert("请选择需要统计的产品！");
       return false ;
     }
     $('select[name=addProductList] option').each(function(){
         $(this).attr('selected',true);
     });
     alert("ssssss");
     alertWindow('操作提示', '');
     $('form[name=myForm]').submit();
 });
 
});