如何在第一个combobox（g：select）的基础上填充第二个combobox（g：select）值？ [英] How to populate 2nd combobox(g:select) values on basis of 1st combobox(g:select)?

问题描述

我试图在第一个组合框（ g：select g：select ）

域类：

  class Person {
 String name 
 static hasMany = [电话：电话] 
} 
 
 class电话{
 String tNumber 
 Person person 
 
 static belongsTo = [person：Person] 
 
} 
  

GSP：

 < td> 
 < / td> 
< td> 
 < / td> 
  

我该如何正确执行此操作？

解决方案

当页面呈现时，不要在第二个组合框中填充项目，并在第一个组合框中存在值更改时填充它。

 < td> 
 < / td> 
< td> 
 < / 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]} 
将电话呈现为JSON 
} 
  

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?

解决方案

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
}

这篇关于如何在第一个combobox（g：select）的基础上填充第二个combobox（g：select）值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！