两个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="全选>" name="allproduct" />
<input type="button" class="btn move" value=">>" name="product" />
<input type="button" class="btn move" value="<<" name="addProductList" />
<input type="button" class="btn all" value="<全选" 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();
});
});