如何根据第一个组合框（g：select）填充第二个组合框（g：select）值？

发布于 2024-10-12 07:58:37 字数 769 浏览 4 评论 0原文

我正在尝试在 GSP 中选择第一个组合框 (g:select) 值时加载第二个组合框 (g:select) 值。

域类：

class Person {    
   String name
   static hasMany = [telephones:Telephone]
}

class Telephone {    
   String tNumber
   Person person

   static belongsTo = [person:Person]

}

GSP：

<td>
<g:select id="person" name="selectedPersonId" from="${Person.list(sort:name, order:asc)}" value="name" optionValue="name" optionKey="id" noSelection="['0':'--Select--']" />
</td>
<td>
<g:select id="telephone" name="selectedTelephoneId" from ="${person.telephones}" value="tNumber" optionValue="tNumber" optionKey="id" noSelection="['0','--Select--']"/>
</td>

我怎样才能正确地做到这一点？

原文

I'm trying to load 2nd combobox (g:select) values on the selection of 1st combobox (g:select) value in GSP.

Domain classes:

class Person {    
   String name
   static hasMany = [telephones:Telephone]
}

class Telephone {    
   String tNumber
   Person person

   static belongsTo = [person:Person]

}

GSP:

<td>
<g:select id="person" name="selectedPersonId" from="${Person.list(sort:name, order:asc)}" value="name" optionValue="name" optionKey="id" noSelection="['0':'--Select--']" />
</td>
<td>
<g:select id="telephone" name="selectedTelephoneId" from ="${person.telephones}" value="tNumber" optionValue="tNumber" optionKey="id" noSelection="['0','--Select--']"/>
</td>

How can I do this properly?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

因为看清所以看轻 2024-10-19 07:58:37

当页面呈现时，不要填充第二个组合框中的项目，而是当第一个组合框中的值发生更改时填充它。

<td>
<g:select id="person" name="selectedPersonId" from="${Person.list(sort:name, order:asc)}" value="name" optionValue="name" optionKey="id" noSelection="['0':'--Select--']" />
</td>
<td>
<g:select id="telephone" name="selectedTelephoneId" from ="${[]}" value="tNumber" optionValue="tNumber" optionKey="id" noSelection="['0','--Select--']"/>
</td>

在第一个组合框上添加 onchange 事件（您可以使用 jquery 或普通 Javascript），该事件将根据所选人员填充电话数据人口。在这里，您可以使用对服务器的 ajax 调用来执行操作，例如：

def getTelephones = {
    def telephoneInstanceList = Telephone.findAllByPerson(Person.get(params.personId))
    def telephones = telephoneInstanceList.collect {[id: it.id, phone: it.tNumber]}
    render telephones as JSON
}

Don't populate the items in the second combobox when the page is rendered, populate it when there is a value change in the 1st combobox.

<td>
<g:select id="person" name="selectedPersonId" from="${Person.list(sort:name, order:asc)}" value="name" optionValue="name" optionKey="id" noSelection="['0':'--Select--']" />
</td>
<td>
<g:select id="telephone" name="selectedTelephoneId" from ="${[]}" value="tNumber" optionValue="tNumber" optionKey="id" noSelection="['0','--Select--']"/>
</td>

Add onchange event on the first combobox (you can use jquery or plain Javascript) that will fill telephone data population based on chosen person. Here you can use an ajax call to the server to an action, something like:

def getTelephones = {
    def telephoneInstanceList = Telephone.findAllByPerson(Person.get(params.personId))
    def telephones = telephoneInstanceList.collect {[id: it.id, phone: it.tNumber]}
    render telephones as JSON
}

回复收藏 0 原文

云雾 2024-10-19 07:58:37

首先不要使用表格来格式化使用 div。
在第一个 g:select 中使用一个 RemoteFunction ，将当前选择作为参数传递，该调用看起来像

"${remoteFunction(action: 'methodName', update: 'DivToUpdate', params: '\'id=\'+this.value')}"

现在，在控制器上的方法中，您调用 render 到包含第二个 g:select 的模板。此 g:select 可以使用控制器中的字段值或参数中的信息。希望这有帮助

First off dont use tables for fomating use div's.
Use a remoteFunction inside the first g:select passing in the current selection as params, the call would look something like

"${remoteFunction(action: 'methodName', update: 'DivToUpdate', params: '\'id=\'+this.value')}"

Now in your method on the controller you call render to a template containing your second g:select. This g:select can use either field values from the controller or info from the params. Hope this helps

回复收藏 0 原文