2011-01-14 5 views
2

Ich versuche, 2. Combobox (g:select) Werte auf die Auswahl der 1. Combobox (g:select) Wert in GSP laden.Wie fülle ich die zweiten combobox (g: select) Werte auf Basis der 1. combobox (g: select)?

Domain Klassen:

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> 

Wie kann ich dies richtig tun?

Antwort

3

Füllen Sie die Elemente in der zweiten Combobox nicht aus, wenn die Seite gerendert wird, füllen Sie sie, wenn sich in der 1. Combobox eine Wertänderung ergibt.

<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-Ereignis auf der ersten Combobox hinzufügen, die Telefondaten Bevölkerung füllt auf Basis von ausgewählten Person (Sie jquery oder einfache Javascript verwenden können). Hier können Sie einen Ajax-Aufruf an den Server zu einer Aktion verwenden können, so etwas wie:

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

Zunächst einmal nicht Tabellen für die Verwendung von div verwenden. eine remoteFunction innerhalb der ersten g Verwendung: Wählen Sie als params in der aktuellen Auswahl vorbei, würde der Anruf so etwas wie

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

nun auf dem Controller zu einer Vorlage rufen Sie Ihre zweite g enthält, in Ihrer Methode Sie machen: select . Dieses g: select kann entweder Feldwerte vom Controller oder Informationen von den Parametern verwenden. Hoffe, das hilft

Verwandte Themen