how to add multiple g:select

问题

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

when a click button "ADD", below combobox User will append a combobox again...with javascript..

i don't know how to do it..when i tried with jQuery last night..but it cannot be append...

<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:

One solution could be to make an Ajax call to the controller and in that method return the g.select with all the options.

Something similar to the following should work...

Add in your 'Add' button a call to a function in the onclick attribute, and inside this function add...

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

Also create a div with id 'selects' so the selects can be appended there.

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

And in your controller add...

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

Haven't tested it, so try it and tell me if you need more help

Edit: Answer to your code If I have understood right, you just need to 'clone' the select to be able to add several users to a group. In this case you don't need to go again to the controller and database to generate a new 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>

来源：https://stackoverflow.com/questions/18972264/how-to-add-multiple-gselect

标签

javascript

grails