Alimenter une second Select par rapport au choix du 1er

Résolu

jb25350 Messages postés 20 Date d'inscription jeudi 23 mars 2006 Statut Membre Dernière intervention 25 juillet 2021 - Modifié le 2 avril 2017 à 00:58
jb25350 Messages postés 20 Date d'inscription jeudi 23 mars 2006 Statut Membre Dernière intervention 25 juillet 2021 - 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

A voir également:

Index2.php?option=
Index.php?opcion= - Meilleures réponses
Base.php?choix= - Meilleures réponses
Exemple rapport projet - Forum C / C++ / C++.NET
Rapport keno ✓ - Forum ASP.NET
Roue choix aléatoire - Forum VB.NET
Checkbox html choix unique ✓ - Forum Javascript / DHTML
Choix aleatoire - Forum Flash

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38134 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 avril 2024 344
2 avril 2017 à 01:00

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

Réponse 2 / 5

jordane45 Messages postés 38134 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 avril 2024 344
3 avril 2017 à 02:40

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 Messages postés 38134 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 avril 2024 344
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 )

Réponse 3 / 5

jb25350 Messages postés 20 Date d'inscription jeudi 23 mars 2006 Statut Membre Dernière intervention 25 juillet 2021
3 avril 2017 à 11:49

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 Messages postés 38134 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 11 avril 2024 344
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 ?

Réponse 5 / 5

jb25350 Messages postés 20 Date d'inscription jeudi 23 mars 2006 Statut Membre Dernière intervention 25 juillet 2021
5 avril 2017 à 11:36

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>

Discussions similaires

gestion de stock

Snippet : Ajouter ,Modifier, Supprimer et Rechercher

application de gestion de vente des carburants

cv en php

gestion de bibliothèque

Récupérer les données d'une base de donnée dans un tableau.

EDIT : Ajout des balises de code

Votre réponse

Discussions similaires