Comment remplir les 2ème valeurs de liste déroulante (g: select) à partir de la première liste déroulante (g: select)?

Question

Je suis en train de charger les valeurs de la 2ème liste déroulante (g:select) sur la sélection de la valeur de la première zone de liste déroulante (g:select) dans GSP.

classes de domaine:

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> 

Comment puis-je faire cela correctement?

Answer 1

Ne pas remplir les éléments de la deuxième zone de liste déroulante lors du rendu de la page, remplissez-la lors d'un changement de valeur dans la première zone de liste déroulante.

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

Ajouter onchange événement sur la première zone de liste déroulante (vous pouvez utiliser jquery ou Javascript ordinaire) qui remplira la population de données de téléphone en fonction de la personne choisie. Ici, vous pouvez utiliser un appel ajax au serveur à une action, quelque chose comme:

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

Answer 2

Cette question est semblable à la vôtre: Grails: Load data on one ComboBox depending on another. Fondamentalement, c'est la même chose à la réponse de Yogiebiz, mais recommande des options différentes.

Answer 3

Tout d'abord, ne pas utiliser de tables pour diviser l'utilisation div. Utilisez un remoteFunction à l'intérieur du premier g: sélectionnez le passage dans la sélection actuelle comme params, l'appel ressemblerait à quelque chose comme

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

Maintenant, dans votre méthode sur le contrôleur que vous appelez rendre à un modèle contenant votre deuxièm: sélectionnez . Ce g: select peut utiliser soit des valeurs de champ du contrôleur, soit des informations provenant des paramètres. Espérons que cela aide

Answer 4

Une mise à jour: Grails a depuis affiché une page wiki sur ce point: https://grails.org/AJAX-Driven+SELECTs+in+GSP