个人中心
gpt4 book ai didi

javascript - 如何添加多个g :select

转载 作者：行者123 更新时间：2023-11-30 05:44:06 25 4
gpt4 key购买 nike

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

当单击“添加”按钮时，用户将在组合框下方再次添加一个组合框...使用 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>

最佳答案

一种解决方案是对 Controller 进行 Ajax 调用，并在该方法中返回带有所有选项的 g.​​select。

类似下面的东西应该可以工作...

在您的“添加”按钮中添加对 onclick 属性中函数的调用，并在此函数中添加...

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

同时创建一个 ID 为“selects”的 div，以便可以将选择附加到那里。

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

然后在你的 Controller 中添加...

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

还没有测试过，所以试试吧，如果您需要更多帮助，请告诉我

编辑:回答您的代码如果我理解正确，您只需要“克隆”选择就可以将多个用户添加到一个组中。在这种情况下，您无需再次访问 Controller 和数据库来生成新的选择。

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

关于javascript - 如何添加多个g :select，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18972264/

25 4 0
文章推荐： javascript - 在 Javascript 中优化函数闭包的使用有多大值(value)？
文章推荐： java - 编码字符串是否有最大的 Base64 大小？
文章推荐： java - volatile 变量的更新值对其他线程不可见
文章推荐： javascript - 为 Kendo 网格中的某些行设置 Editable False
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com