как добавить несколько g: выберите

Http://www.4shared.com/download/8Q8J5E2Z/122.PNG?tsid=20130924-025921-5796ea2b

При нажатии кнопки "Добавить", ниже combobox пользователь будет добавлять combobox снова...с JavaScript..

Я не знаю как это сделать..когда я пытался с jQuery прошлой ночью..но его нельзя присоединить...

<g:select name="user.id" from="${userdetailsList?.firstName}" noSelection="['':'User']"/>


<html>
    <head>
        <g:set var="entityName" value="${message(code: 'CurrencyList.label', default: 'CurrencyList')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>          
    </head>
    <body>  
    <g:if test="${flash.message}">
        <div id="userMessage" class="info" style="color:orange;background-color:#d0e4fe;">${flash.message}</div>
    </g:if>
    <table align="left">
    <tbody>
        <tr>
            <td style="font-size:20px;" colspan="3"><b>Group Add</b></td>
        </tr>
        <tr>
            <td width="70">Name</td>
            <td width="5">:</td>
            <td><g:textField name="namagrup" value="${nama}" /></td>
        </tr>
        <tr>
            <td>Description</td>
            <td>:</td>
            <td><g:textArea name="deskripsigrup" value="myValue" rows="5" cols="40"/></td>
        </tr>
        <tr></tr>

    </tbody>    
</table>
        <ol>
        <h3 >User</h3>
        <br>
        <div id="selects"><g:select name="user.id" 
                    from="${userdetailsList?.firstName}"  
                    noSelection="['':'User']" /> </div>
        <button>ADD</button>  
        <br>
        </ol>
    </body>
</html>
1 2
javascript grails

1 ответ:

Одним из решений может быть вызов Ajax к контроллеру и в этом методе возврат g. select со всеми опциями.

Должно сработать нечто подобное следующему...

Добавьте в вашу кнопку "Добавить"вызов функции в атрибуте onclick, и внутри этой функции добавьте...

$.ajax({
   url: "${createLink(action:'loadSelect')}",
   success: function(data, status){
       $("#selects").append(data);
   }
})

Также создайте div с идентификатором "selects", чтобы выбранные элементы можно было добавить туда.

<div id="selects"></div>

И в вашем контроллере добавить...

def loadSelect(){
    // whatever you need to get the data...
    render "<g:select name='user.id' from='${userdetailsList?.firstName}' noSelection='[\'\':\'User\']'/>"
}

Еще не испытывал его, так что попробуйте и скажите мне, если вам нужна дополнительная помощь

Edit: ответ на ваш код Если я правильно понял, вам просто нужно "клонировать" select, чтобы иметь возможность добавить несколько пользователей в группу. В этом случае вам не нужно снова обращаться к контроллеру и базе данных, чтобы сгенерировать новый select.

<html>
    <head>
        <g:set var="entityName" value="${message(code: 'CurrencyList.label', default: 'CurrencyList')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>  
        <script type="text/javascript">
            function addSelect(){
                 $("#selects").append($("#firstSelect").clone());
            }
        </script>        
    </head>
    <body>  
    <g:if test="${flash.message}">
        <div id="userMessage" class="info" style="color:orange;background-color:#d0e4fe;">${flash.message}</div>
    </g:if>
    <table align="left">
    <tbody>
        <tr>
            <td style="font-size:20px;" colspan="3"><b>Group Add</b></td>
        </tr>
        <tr>
            <td width="70">Name</td>
            <td width="5">:</td>
            <td><g:textField name="namagrup" value="${nama}" /></td>
        </tr>
        <tr>
            <td>Description</td>
            <td>:</td>
            <td><g:textArea name="deskripsigrup" value="myValue" rows="5" cols="40"/></td>
        </tr>
        <tr></tr>

    </tbody>    
</table>
        <ol>
        <h3 >User</h3>
        <br>
        <div id="selects"><g:select id="firstSelect" name="user.id" 
                    from="${userdetailsList?.firstName}"  
                    noSelection="['':'User']" /> </div>
        <button onclick="addSelect()">ADD</button>  
        <br>
        </ol>
    </body>
</html>
2