Dynamic Select Item left to right

 

 

1）Jsp 

<th class="span5">

   <div class="text-center">

       <s:select id="document" name="documentCodes" multiple="true" cssStyle="width:400px;" size="22"                     list="masterPolicyDocumentsManagementTabDto.documentList" listKey="code"                                         listValue="i18nLabel"/>

   </div>

</th>      

 

<th class="span2">

                    <div class="text-center">

                        <button class="btn" type="button" id="addAll"> &nbsp;&gt;&gt;&nbsp; </button>

                            <br/> 

                        <button class="btn" type="button" id="add"> &nbsp;&nbsp;&gt;&nbsp;&nbsp; </button>

                            <br/> 

                        <button class="btn" type="button" id="remove"> &nbsp;&nbsp;&lt;&nbsp;&nbsp; </button>

                            <br/> 

                        <button class="btn" type="button" id="removeAll"> &nbsp;&lt;&lt;&nbsp; </button>

                    </div>

</th>

<th class="span5">

   <div class="text-center">

         <s:select id="documentClaim" name="documentClaimDocumentCodes" multiple="true"                                     cssStyle="width:400px;" size="22"                                                                                                                 list="masterPolicyDocumentsManagementTabDto.documentClaimList"                                                       listKey="documentCode" listValue="documentDto.i18nLabel"/>

   </div>

</th>

 

2)Jquery

       $("#addAll").click(function(){ 

        if($("#document option").length>0){ 

            $("#document option").each(function(){ 

                 $("#documentClaim").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); 

                 $(this).remove();

            })

        }

    }) 

 

    $("#add").click(function(){ 

        if($("#document option:selected").length>0){ 

            $("#document option:selected").each(function(){ 

                 $("#documentClaim").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); 

                 $(this).remove();  

            })

        }else{

            addAlert('<s:text name="rsc.alert.msg.availableDocumentsMandatory" />');

        }

    }) 

          

    $("#remove").click(function(){

        if($("#documentClaim option:selected").length>0) { 

            $("#documentClaim option:selected").each(function(){ 

                $("#document").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); 

                $(this).remove();  

            })

        }else{

            addAlert('<s:text name="rsc.alert.msg.claimDocumentsMandatory" />');

        }

    })

 

    $("#removeAll").click(function(){

        if($("#documentClaim option").length>0) { 

            $("#documentClaim option").each(function(){ 

                $("#document").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option"); 

                $(this).remove();  

            })

        }

    })

 

//remove linked docs

function removeLinkedDocuments(){

    var doclaim = new Array();

    var i = 0;

    if($("#documentClaim option").length>0) { 

        $("#documentClaim option").each(function(){ 

            doclaim[i] = $(this).val();

            i++;

        })

    }

 

    if($("#document option").length>0) { 

        $("#document option").each(function(){ 

            for(var j = 0; j < doclaim.length; j++){

                if($(this).val() == doclaim[j]){

                    $(this).remove();

                    break;

                }

            }

        })

    }

}

 

 

 参考地址:http://blog.csdn.net/netzmj/article/details/12008253

 

 

 

 

参考地址:http://www.thinksaas.cn/group/topic/229013/