1. #1
    Membre à l'essai
    Inscrit en
    juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 24
    Points : 12
    Points
    12

    Par défaut Listes déroulantes liées

    Bonjour,

    Je souhaiterais lier plusieurs listes déroulantes en faisant appel à une BDD.

    Ma JSP :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <select name="projet"><br> <option value="" selected>Sélectionner un projet</option>
        <c:forEach items="${projet}" var="listeProjet">
        <option value="<c:out value="${listeProjet.libelle }"/>">${ listeProjet.libelle}</option>
             </c:forEach>
    </select>
    <select name="demandeur">
        <option value="" selected>Sélectionner un demandeur</option>
        <c:forEach items="${demandeur}" var="listeDemandeur" >
        <option value="<c:out value="${ listeDemandeur.libelle }"/>">${ listeDemandeur.libelle }</option>
        </c:forEach>
    </select>
    <select name = "sujet">
        <option value="" selected>Sélectionner un sujet</option>
        <c:forEach items="${sujet}" var="listeSujet">
            <option value="<c:out value="${ listeSujet.libelle }"/>">${ listeSujet.libelle }</option>
             </c:forEach>
    </select>
    Ma liste déroulante Projet est bien remplie et selon ce que je sélectionne dans projet, il faudrait que je rajoute un élément dans les listes déroulantes sujet et demandeur, en interrogeant la base de données.

    Comment dois je procéder pour liées ces listes et interroger la BDD ?

    Merci d'avance pour votre aide.

  2. #2
    Expert éminent sénior
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    septembre 2012
    Messages
    2 345
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : septembre 2012
    Messages : 2 345
    Points : 11 329
    Points
    11 329

    Par défaut

    Un petit coup d'Ajax?

    Tu capte le changement d'état de ta liste maitre, tu envoie un évènement à ton serveur pour récupérer les valeurs de la liste esclave, et tu mets à jours ta liste esclave avec les valeurs qui vont bien.

  3. #3
    Membre à l'essai
    Inscrit en
    juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 24
    Points : 12
    Points
    12

    Par défaut

    Je voulais utiliser ajax mais j'ai pas réussi. Aurais tu un exemple ?

  4. #4
    Expert éminent sénior
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    septembre 2012
    Messages
    2 345
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : septembre 2012
    Messages : 2 345
    Points : 11 329
    Points
    11 329

    Par défaut

    Google est ton ami : javascript deux listes liées

    Bon courage!

  5. #5
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    septembre 2007
    Messages
    7 716
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : septembre 2007
    Messages : 7 716
    Points : 13 278
    Points
    13 278

    Par défaut

    Bonjour,

    http://siddh.developpez.com/articles/ajax/. Côté servlet, tu génères le select de la même façon que celui du tutoriel qui est en php.

    A+.

  6. #6
    Membre à l'essai
    Inscrit en
    juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 24
    Points : 12
    Points
    12

    Par défaut

    Merci pour vos réponses

  7. #7
    Membre à l'essai
    Inscrit en
    juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 24
    Points : 12
    Points
    12

    Par défaut

    Je viens d'essayer d'ajouter ajax mais cela ne fonctionne pas. Je vous montre mon code afin de voir si vous voyais l'erreur.

    Ma JSP :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    <select id="projet" name="projet" disabled onchange="remplir('projet','demandeur');remplir('projet','sujet')">
    									<option value="" selected>Sélectionner un projet</option>
    								 	<c:forEach items="${projet}" var="listeProjet">
                 							<option value="<c:out value="${ listeProjet.identifiant }"/>">${ listeProjet.libelle }</option>
             						 	</c:forEach>
             						</select>
    								<select id="demandeur" name="demandeur" disabled>
    									<option value="" selected>Sélectionner un demandeur</option>
    								 	<c:forEach items="${demandeur}" var="listeDemandeur" >
                 							<option value="<c:out value="${ listeDemandeur.libelle }"/>">${ listeDemandeur.libelle }</option>
             						 	</c:forEach> 
    								</select>
    								<select id="sujet" name = "sujet" disabled>
    									<option value="" selected>Sélectionner un sujet</option>
    									<c:forEach items="${sujet}" var="listeSujet">
                 							<option value="<c:out value="${ listeSujet.libelle }"/>">${ listeSujet.libelle }</option>
             						 	</c:forEach> 
    								</select>
    Mon JS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
     
    function getXhr(){
    	var xhr = null;
     
    	if(window.XMLHttpRequest) // Firefox et autres
    		xhr = new XMLHttpRequest(); 
    	else if(window.ActiveXObject){ // Internet Explorer 
    		try {
    			xhr = new ActiveXObject("Msxml2.XMLHTTP");
    		} catch (e) {
    			xhr = new ActiveXObject("Microsoft.XMLHTTP");
    		}
    	}
    	else { // XMLHttpRequest non supporté par le navigateur 
    		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    		xhr = false; 
    	} 
        return xhr;
    }
     
    /**
    * Méthode permettant d'envoyer les données qui sera appelée sur le click du bouton
    */
    function remplir(parentSelect,enfantSelect){
    	var xhr = getXhr();
    	// On défini ce qu'on va faire quand on aura la réponse
    	xhr.onreadystatechange = function(){
    		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    		if(xhr.readyState == 4 && xhr.status == 200){
    			leselect = xhr.responseText;
    			// On se sert de innerHTML pour rajouter les options a la liste
    			document.getElementById(enfantSelect).innerHTML = leselect;
    			alert(enfantSelect);
    		}
    		//côté ajax ça merde
    		else{
    			//on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
    			 if(objet1.status == 404){
    				 alert('Erreur ' +objet1.status + '! La page semble être absente...');
    			 }
    		}
    	};
    	// Ici on va voir comment faire du post
    	//ne pas oublier de poster les arguments
    	//ici, l'id de l'auteur
    	sel = document.getElementById(parentSelect);
    	idParent = sel.options[sel.selectedIndex].value;
    	//Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
    	xhr.open("GET","/GTP/tache?action=ajouter&remplir="+enfantSelect+"&select="+idParent,true);
    	//envoie
    	xhr.send(null);
    	}
    Ma servlet :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     
    String remplir=request.getParameter("remplir");
    Integer idSelect = null;
    		if (request.getParameter("select")!= null){
    			idSelect = Integer.parseInt(request.getParameter( "select" ));
    		}
    .....
     
    switch (remplir) {
    				case "demandeur":
    					DemandeurBean demandeurProjet = demandeurDAO.find(idSelect);
    					demandeur.add(demandeurProjet);
    					break;
    				case "sujet":
    					SujetBean sujetProjet = sujetDAO.find(idSelect);
    					sujet.add(sujetProjet);
    				default:
    					break;
    				}
    ....
     
    request.setAttribute("demandeur", demandeur);
    request.setAttribute("sujet", sujet);

  8. #8
    Membre à l'essai
    Inscrit en
    juillet 2009
    Messages
    24
    Détails du profil
    Informations forums :
    Inscription : juillet 2009
    Messages : 24
    Points : 12
    Points
    12

    Par défaut

    merci

  9. #9
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    septembre 2007
    Messages
    7 716
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : septembre 2007
    Messages : 7 716
    Points : 13 278
    Points
    13 278

    Par défaut

    Bonjour,

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if(xhr.readyState == 4){
    	if (xhr.status == 200 || xhr.status == 0){
    		leselect = xhr.responseText;
    		document.getElementById(enfantSelect).innerHTML = leselect;
    		alert(enfantSelect);
    	}else{
    		alert('Erreur :' +xhr.status + ' '+xhr.statusText);
    	}
    }
    Ensuite, le type select ne supporte pas l'innerHTML sur certains navigateur. Tu dois utiliser un div conteneur que tu dois rafraîchir pour mettre le nouveau select.

    A+.

Discussions similaires

  1. Listes déroulantes liées entre elles (autre lien)
    Par senacle dans le forum JavaScript
    Réponses: 2
    Dernier message: 29/09/2005, 21h22
  2. Debug script listes déroulantes liées
    Par AnTiX dans le forum JavaScript
    Réponses: 7
    Dernier message: 20/04/2005, 12h03
  3. Réponses: 4
    Dernier message: 29/03/2005, 16h45
  4. listes déroulantes liées
    Par k4eve dans le forum Struts
    Réponses: 3
    Dernier message: 26/04/2004, 15h11
  5. Listes déroulantes liées entre elles
    Par denisC dans le forum JavaScript
    Réponses: 0
    Dernier message: 27/07/2002, 15h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo