Alimenter une second Select par rapport au choix du 1er [Résolu]

jb25350 14 Messages postés jeudi 23 mars 2006Date d'inscription 14 octobre 2017 Dernière intervention - 1 avril 2017 à 09:24 - Dernière réponse : jb25350 14 Messages postés jeudi 23 mars 2006Date d'inscription 14 octobre 2017 Dernière intervention
- 5 avril 2017 à 11:36
Bonjour à Toutes et à Tous,

Voici mon problème :

J'ai une table avec comme champs 'departement et 'localite'

Je cherche à alimenter mon 2ème Select depuis le choix du Premier Select lorsque j'ai choisi le département il m'affiche les localités correspondantes
1er select :
<select name='departement' id='departement' class='double' style='width:150px;>
<option selected=selected value=''>Votre Choix</option> ";
while ($donnees03 = $reponse03->fetch())
{
echo "<option value='".$donnees03['departement']."'>".$donnees03['departement']."</option>";
}
echo "</select> ";


echo"<script language='Javascript'>
//<![CDATA[
function change_valeur() {
select = document.getElementById('departement');
choice = select.selectedIndex // Récupération de l'index du <option> choisi
departement = select.options[choice].value; // Récupération du texte du <option> d'index 'choice'//]]></script><input type='text' name='departement' size='30' value='".$donnees03['departement']."' maxlength='30'/>";
if(!empty($donnees03['departement'])){ echo"<input type='text' name='votrechoix' size='30' value='".$_GET['departement']."' maxlength='30'/>";
}//else{echo'Pas Trouvé!!!';}

mon Script JavaScript :
<script language="Javascript">
<!--

function votrechoix()
{
// alert(document.getElementById("departement").value);
var votrechoix=document.getElementById("departement").value;

//alert(votrechoix);
// document.write (votrechoix);


//document.close();
//window['VotreChoix']=votrechoix;

//return(votrechoix);



return;
}

//-->
</script>

avec Alert il m'affiche bien la sélection mais je n'arrive pas à récupérer la valeur JS (votrechoix)

Merci à vous
Cordialement

EDIT : Ajout des balises de code

Afficher la suite 

7 réponses

Répondre au sujet
jordane45 20554 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 2 avril 2017 à 01:00
0
Utile
Bonjour,

Ce que tu cherches à faire .. ce sont des listes déroulantes liées.
Cela se fait en JAVASCRIPT avec, si besoin, de l'AJAX.
Par exemple :
http://chez-syl.fr/2012/02/jquery-remplir-une-liste-deroulante-selon-une-autre-liste/

ou encore :
http://creer-un-site.fr/liste-deroulante-liee-en-ajax-295.php


Commenter la réponse de jordane45
jordane45 20554 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 3 avril 2017 à 02:40
0
Utile
1
Au lieu de me faire des messages privés ... viens plutôt répondre ici.

Bref...
en te basant sur le premier lien que je t'ai donné ... ( en utilisant la librairie javascript JQUERY)
voici ce que tu dois avoir :

coté javascript
$(document).ready(function() {

    // à la sélection d une valeur dans la liste
    $("#id_de_ta_premiere_liste_deroulante").on('change', function() {
        var val = $(this).val(); // on récupère la valeur de la liste
 
        if(val != '') {
            $("#id_seconde_liste_deroulante").empty(); // on vide la liste des départements
             
            $.ajax({
                url: 'traitement.php',
                data: {val:val},
                type: "POST",
                dataType: 'json',
                success: function(reponse) {
                    //on rempli la seconde liste
                    $.reponse(json, function(index, value) {
                        $("#id_seconde_liste_deroulante").append('<option value="'+ index +'">'+ value +'</option>');
                    });
                }
              , error:function(jqXHR, textStatus){
                 alert('Error.\n' + jqXHR.responseText);
              });
            });
        }
    });
});


Le fichier de traitement :
<?php
 //traitement.php
 
 //recuperation des variables
 $val = !empty($_POST['val']) ? $_POST['val'] : NULL;
 
 $result = array();
 
 
  //------------------------------
  //ici tu code la récupération des valeurs à afficher en fonction du choix dans la première liste ...
  
  
  
  //------------------------------
 
 //renvoi des données vers le javascript en JSON
 echo json_encode($result);
?>


NB : Tu peux télécharger jquery ici https://code.jquery.com/jquery-3.2.0.min.js
Il te faut l'enregistrer sur ton disque dur dans le répertoire de ton site puis l'inclure dans ta page
 <script src="chemin/vers/le/fichier/jquery-3.2.0.min.js"></script>



NB² : Le code que je t'ai donné reste à être adapté à tes besoins (remplacer les ID par les tiens... compléter la partie récupération des données.... )


jordane45 20554 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 3 avril 2017 à 11:25
En lisant le code que tu m'as mis en MP ... je pense que tu as comis une petite erreur .....
Il faut bien avoir un fichier php (ici : traitement.php ) DIFFERENT du du fichier qui te sert à afficher tes listes ( chez toi le : index.php )

En gros tu as au minimum deux fichiers ( trois si tu comptes le jquery.js )
- Index.php (affiche tes éléments html, tes listes ...+ ton code javascript )
- traitement.php (appelé via le javascript UNIQUEMENT pour obtenir la liste des éléments à afficher dans ta seconde liste )
Commenter la réponse de jordane45
jb25350 14 Messages postés jeudi 23 mars 2006Date d'inscription 14 octobre 2017 Dernière intervention - 3 avril 2017 à 11:49
0
Utile
1
1er Fichier avec un include de Traitement
<?php
$local = $_SERVER['SERVER_NAME'];
$dbserver='localhost'; //ADRESSE DU SERVEUR SQL
		

$dbdb="agence"; //NOM DE LA BASE DE DONNEES A UTILISER
$dbuser="root"; //NOM D'UTILISATEUR DE LA LA BASE DE DONNEES A UTILISER
$dbpass=""; //MOT DE PASSE DE LA BASE DE DONNEES A UTILISER
$racine = "";
$local = "http://".$local;	
try
{
	$bdd = new PDO("mysql:host=$dbserver;dbname=$dbdb", $dbuser, $dbpass, array (PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES \'UTF8\''));
	$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (Exception $e)
{
	die('Erreur : ' . $e->getMessage());
}
include('traitement.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Alimenter une liste de Ville selon le Département sélectionnée avec jQuery et MySQL</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="jquery_3-2-0-min.js"></script>
<script>
$(document).ready(function() {
	var $departement = $('#departement');
	var $ville = $('#ville');
	
	// chargement des régions
	$.ajax({
		url: 'index.php',
		data: 'go', // on envoie $_GET['go']
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			$.each(json, function(index, value) { // pour chaque noeud JSON
				// on ajoute l'option dans la liste
				$departement.append('<option value="'+ index +'">'+ value +'</option>');
			});
		}
	});

	// à la sélection d'un Département dans la liste
	$departement.on('change', function() {
		var val = $(this).val(); // on récupère la valeur du Département

		if(val != '') {
			$ville.empty(); // on vide la liste des Villes
			
			$.ajax({
				url: 'index.php',
				data: 'id='+ val, // on envoie $_GET['id']
				dataType: 'json',
				success: function(json) {
					$.each(json, function(index, value) {
						$ville.append('<option value="'+ index +'">'+ value +'</option>');
					});
				}
			});
		}
	});
});
</script>
</head>

<body>

	<h2>Alimenter une liste de départements selon la région sélectionnée avec jQuery et MySQL</h2>
	
	<form class="recherche" method="post" name="recherche" action="">		
		<select id="departement" name="departement">
			<option value="">-- Département --</option>
			<?php	$reponse03 =$bdd->prepare('SELECT DISTINCT departement FROM vendeur ORDER BY departement ASC');					
				$reponse03->bindParam(':localite', $localite, PDO::PARAM_STR);
				$reponse03->bindParam(':departement', $departement, PDO::PARAM_INT);				
				$reponse03->execute();
				while ($donnees03 = $reponse03->fetch())
				{
					echo "<option value='".$donnees03['departement']."'>".$donnees03['departement']."</option>";			
				}
			?>
		</select>
		 
		<select id="ville" name="ville">
			<option value="">-- Ville--</option>
			<?php			
			$reponse04 =$bdd->prepare('SELECT localite FROM vendeur WHERE departement LIKE "'.$_POST['departement'].'%" ORDER BY localite ASC');			
			$reponse04->bindParam(':departement', $departement, PDO::PARAM_STR);			
			$reponse04->bindParam(':localite', $localite, PDO::PARAM_STR);
			
			$reponse04->execute();	
			while ($donnees04 = $reponse04->fetch())
			{	
				echo "<option value='".$donnees04['localite']."'>".$donnees04['localite']."</option>";
			}									
			?>
			
		</select>
		

	</form>
	
</body>

</html>

2ème Fichier
<?php

 //traitement.php
 
 //recuperation des variables
 //$val = !empty($_POST['val']) ? $_POST['val'] : NULL;
 
 //$result = array();
 
if(isset($_GET['go']) || isset($_GET['id'])) {
 echo 'dedans';
    $json = array();
     
    if(isset($_GET['go'])) {
        // requête qui récupère les régions
        $requete = "SELECT id, departement FROM vendeur ORDER BY departement";
    } else if(isset($_GET['id'])) {
        $id = htmlentities(intval($_GET['id']));
        // requête qui récupère les départements selon la région
        $requete = "SELECT id, localite FROM vendeur WHERE id = ". $id ." ORDER BY localite";
    }
     
    // connexion à la base de données
    try {
        $bdd = new PDO('mysql:host=localhost;dbname=agence', 'root', '');
    } catch(Exception $e) {
        exit('Impossible de se connecter à la base de données.');
    }
    // exécution de la requête
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
     
    // résultats
    while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
        // je remplis un tableau et mettant l'id en index (que ce soit pour les régions ou les départements)
        $json[$donnees['id']][] = utf8_encode($donnees['departement']);
    }
     
    // envoi du résultat au success
    echo json_encode($json);
}
?>

Si je sélectionne le département le second select est vide

Merci encore à toi Jordane
Cordialement
jordane45 20554 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 3 avril 2017 à 12:34
1 - Pourquoi fais tu un include('traitement.php'); dans ta première page ????

2 - Pourqoi ton traitement.php utilises le GET alors que dans le code que je t'ai donné .... ça utilise le POST ?
Commenter la réponse de jb25350
jb25350 14 Messages postés jeudi 23 mars 2006Date d'inscription 14 octobre 2017 Dernière intervention - 3 avril 2017 à 15:47
0
Utile
j'ai repris le code http://chez-syl.fr/2012/02/jquery-remplir-une-liste-deroulante-selon-une-autre-liste/

J'utilise un include pour accéder à traitement.php

et le code est avec $_GET car il n'y a pas de bouton Submit

ton code est :
$departement = !empty($_POST['departement']) ? $_POST['departement'] : NULL;

$result = array();

mais il ne me renvoie rien (c'est moi qui ne dois pas savoir l'utiliser!!!)

Merci
Commenter la réponse de jb25350
jb25350 14 Messages postés jeudi 23 mars 2006Date d'inscription 14 octobre 2017 Dernière intervention - 5 avril 2017 à 11:36
0
Utile
Bonjour à Tous,

Un grand merci à Jordane,

J'ai trouvé cette solution qui marche bien :

avec 2 form :
<?php 

			
if(isset($_POST['departement'])){
	$departement=$_POST['departement'];
	$departementarecuperer=$_POST['departement'];
	//echo ' Choix : '.$_POST['departement'];
					
}
								
?>
			
<form class="affiche" method="post" name="affiche" id="affiche" action="index.php">			
<?php 										
$reponse =$bdd->prepare('SELECT DISTINCT localite FROM '.$vendeur_BDD.' ORDER BY localite ASC');
$reponse->bindParam(':numdossier', $numdossier, PDO::PARAM_STR);
$reponse->bindParam(':nomvendeur', $nomvendeur, PDO::PARAM_STR);
$reponse->bindParam(':departement', $localite, PDO::PARAM_STR);
$reponse->execute();			
					
echo"
						
<ul>							
<li class='espacemini'></li>
<li>
<label for='departement' class='double2'>Département : </label>							<select name='departement' id='departement' onchange='javascript:submit(this)' style='width:150px;'>
	<option selected=selected value='VotreChoix'>Votre Choix</option>";
		$reponse03 =$bdd->prepare('SELECT DISTINCT departement FROM '.$vendeur_BDD.' ORDER BY departement ASC');					
$reponse03->bindParam(':localite', $localite, PDO::PARAM_STR);
$reponse03->bindParam(':departement', $departement, PDO::PARAM_INT);
$reponse03->bindParam(':villedepartement', $villedepartement, PDO::PARAM_INT);	
$reponse03->execute();
				
while ($donnees03 = $reponse03->fetch())
	{
	echo "<option value='".$donnees03['departement']."'>".$donnees03['departement']."</option>";

	if(isset($_POST['departement'])){ 
		echo "<option selected=selected value='".$departement."'>".$departement."</option>";
	}								
}	
echo "</select> 
<script language='Javascript'>
//<![CDATA[	
function change_valeur() {
select = document.getElementById('departement');
choice = select.selectedIndex  // Récupération de l'index du <option> choisi
departement = select.options[choice].value; // Récupération du texte du <option> d'index 'choice'
//]]>
</script>";
if (isset($_POST['departement'])){
						
echo "<span class='texteaffichage'>Département Choisi : </span><span class='texteaffichagegras'>".$departement.'</span>';					
										}
echo"</li>
</ul>";	
												
?>
</form>
<!-- --------------------------------------------------------------------------- -->                    
<form class="recherche" method="post" name="recherche" id='recherche' action="index.php">			
<?php				
echo"<ul>
<li class='espacemini'></li>
<li>";
								
if (isset($_POST['departement'])){
	echo"<input type='hidden' name='departement' value='".$_POST['departement']."'>";
}
echo"<label for='localite' class='double2'>Ville : </label>								
<select name='localite' id='localite'  class='double' style='width:150px' ; ' />								
<option selected=selected value=''>Votre Choix</option>";									
$reponse04 =$bdd->prepare('SELECT DISTINCT localite FROM '.$vendeur_BDD.' WHERE departement LIKE "'.$_POST['departement'].'%" ORDER BY localite ASC');
	$reponse04->bindParam(':departement', $localite, PDO::PARAM_STR);
	$reponse04->bindParam(':localite', $localite, PDO::PARAM_STR);
									
$reponse04->execute();			
									
while ($donnees04 = $reponse04->fetch())
	{	
	echo "<option value='".$donnees04['localite']."'>".$donnees04['localite']."</option>";
										
	}

echo "</select> ";
						
echo"<script language='Javascript'>//<![CDATA[function change_valeur() {select = document.getElementById('localite');choice = select.selectedIndex  // Récupération de l'index du <option> choisi
localite = select.options[choice].value; // Récupération du texte du <option> d'index 'choice'
//]]>
</script> ";
if(isset($_POST['localite'])){
echo $_POST['localite'];
}									
echo"</li> 



--
Commenter la réponse de jb25350

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.