Javascript 如何添加多个g:select
当点击按钮添加时,下面的combobox用户将再次添加一个combobox…使用javascript 我不知道怎么做..当我昨晚尝试使用jQuery时..但它不能被附加Javascript 如何添加多个g:select,javascript,grails,Javascript,Grails,当点击按钮添加时,下面的combobox用户将再次添加一个combobox…使用javascript 我不知道怎么做..当我昨晚尝试使用jQuery时..但它不能被附加 <g:select name="user.id" from="${userdetailsList?.firstName}" noSelection="['':'User']"/> <html> <head> <g:set var="entityName" va
<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>
一种解决方案是对控制器进行Ajax调用,并在该方法中返回带有所有选项的g.select 类似于以下内容的内容应该可以工作 在“添加”按钮中添加对onclick属性中函数的调用,并在此函数中添加
$.ajax({
url: "${createLink(action:'loadSelect')}",
success: function(data, status){
$("#selects").append(data);
}
})
还要创建一个id为“selects”的div,以便可以将selects追加到该div中
<div id="selects"></div>
在控制器中添加
def loadSelect(){
// whatever you need to get the data...
render "<g:select name='user.id' from='${userdetailsList?.firstName}' noSelection='[\'\':\'User\']'/>"
}
还没有测试过,所以尝试一下,如果需要更多帮助,请告诉我
编辑:回答你的代码
如果我理解正确,您只需“克隆”选择即可将多个用户添加到一个组中。在这种情况下,无需再次转到控制器和数据库来生成新的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>
g:select的目的是在服务器端运行以生成标记。除非您希望从服务器端控制器操作呈现模板,否则无法使用javascript呈现g:select。你需要帮助jQuery创建第二个标记吗?你能给我看一下示例编码吗?我对此一无所知抱歉,我真的很困惑…我已经编辑了我的帖子…有我的编码…我从来没有使用过ajax你不想使用ajax或者你以前没有使用过它?此外,选择将始终保持不变,或者在单击“添加”按钮之间可能会发生更改?哦…我以前没有使用过它…事实上,选择值来自数据库,当我单击“添加”时,它将附加在组合框下方,它可以删除组合框selectsee更新的答案,如果我现在理解正确,它将为您提供所需的内容。。。