html - 用数组变量填充多个g:select

我试图有两个多重选择列表，我试图在两者之间进行典型的添加/删除。我能够最初添加和删除并保存第二个g:select中的值数组，但是当我尝试向用户显示更新后的值时，似乎无法重新填充第二个g:select。

<table class="threecols">
  <tr>
    <td style="width: 10%">
     <g:select multiple="true" id="select1" name="select1" from="${['User','Department','School','Class','User','Id','District']}" disabled="${disabled}"/>
    </td>
    <td style="width: 10%">
        <button type="button" style="margin-left: 12px"><a href="#" id="add">Add &gt;&gt;</a>
        </button>
        <button type="button"><a href="#" id="remove">&lt;&lt; Remove</a>    </button>
   </td>
   <td style="width: 10%">
     <g:select multiple="true" id="select2" name="paramList" from="${report?.paramList}" value="${report?.paramList}" disabled="${disabled}"/>
   </td>
  </tr>
</table>

变量声明为:String [] paramList
任何帮助表示赞赏。

最佳答案

您需要使用JQuery来做到这一点:

$(document).ready(function() {

    $('#add').click(function(){
        $('#select2 option:selected').each( function() {
                $('#select1').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#remove').click(function(){
        $('#select1 option:selected').each( function() {
            $('#select2').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

});

此处更多信息:Link