Liste de choix dans plusieurs SELECT [Sources]

**llaffont** · 06/08/2010, 15h10

Voilà je viens de retomber sur un truc que j'avais bidouillé il-y-a quelques temps.

Je l'ai dépoussiéré et mis à jour

Comme je ne sais pas trop quoi en faire et que j'ai vois souvent des topics avec la question "Comment faire des select qui change en fonction de l'option choisi dans le Select précédent ? "

Je mets à dispo :

C'est en 3 script :

_ La page HTML
_ La Script Ajax
_ Le Script PHP

Il faudra également ajouter JQuery sur la racine. http://jquery.com/

Index.HTML :

Code html :

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
 
<HTML>
	<HEAD>
		<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> <!--Très important que le framework soit avant les scripts lui faisant référence-->
		<script language="javascript" type="text/javascript" src="MesAjaxFonction.js"></script>
	</HEAD>
	<BODY>
		<DIV ID="MessageJS">
			<span>Ce navigateur ne prends pas en charge JAVASCRIPT.</span>
		</div>
		<DIV Id="Page" style="display:none;"> <!--Si le Javascript n'est pas pris en charge le Message informe et la page reste cachée-->
		<!--Il n'est pas obligatoire de déclarer les balises SELECT dans un DIV. C'est juste afin de pouvoir les "Styler" avec un CSS -->
			<DIV ID="select_1" style="float:left; margin-right:5px;" >
				<select class="Groupe" size="1">
					<option value="0">Sélectionner ...</option>
					<option value="1">Groupe 1</option>
					<option value="2">Groupe 2</option>
					<option value="3">Groupe 3</option>
					<option value="4">Groupe 4</option>
					<option value="5">Groupe 5</option>
					<option value="6">Groupe 6</option>
					<option value="7">Groupe 7</option>
					<option value="8">Groupe 8</option>
					<option value="9">Groupe 9</option>
					<option value="10">Groupe 10</option>
				</select>
			</DIV>
			<DIV ID="select_2"style="float:left; margin-right:5px;" >
				<select class="SousGroupe" size="1">
				</select>
			</DIV>
			<DIV ID="select_3" style="float:left; margin-right:5px;">
				<select class="SousSousGroupe" size="1">
				</select>
			</DIV>
			<DIV ID="resultat">
			</DIV>
		</DIV>
	</BODY>
</HTML>

MesAjaxFonction.js

Code js :

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
53
54
55
 
$(function(){
	$("#MessageJS").empty(); //Efface le message qui affiche que le navigateur ne prends pas en charge JAVASCRIPT.
	$("#Page").show();// Si le JavaScript Fonction on affiche la page.	
	$("select").change(function () {//Action lors d'une selection sur les boites dates
		ChangeOption(this);
	});
});
 
function ChangeOption(Balise){
var OptionChoisi= $(Balise).val(), // On récupère la valeur de l'option
	ClassBalise = $(Balise).attr("class"),// on récupère le nom de la class affecté au SELECT pour la suite de l'inter-action
	IDBalise = $(Balise).attr("id")
	parametres = 'actionPOST='+IDBalise+'&IdSelectParent='+OptionChoisi, //déclare les parametres pour la fonction AJAX. 
	url = './RetourPHP.php'; // L'URL du Script fournissant le retour.
 
if (OptionChoisi != 0){ // Je ne traite pas le ELSE à vous d'adapter en fonction de vos besoins.
$.ajax({
		type: "POST", // Requete POST
		url: url, 
		dataType: "html", // Format du retour de l'url
		success : AfficheSuccess, // Si tout marche bien
		data: parametres, 
		error: AfficheErreur // Si on se plante ;o)
	})	
}
//Afin de pouvoir exploiter les variables de l'objet déclencheur nous déclarons la function de succès à l'interrieur de la fonction d'événement.
function AfficheSuccess(retourSuccess){
	switch (ClassBalise) {	// on change la façon de réagir en fonction de l'élément déclencheur.
 
		case 'Groupe' :
			$('#resultat').empty();
			$('select.SousGroupe').empty();
			$('select.SousSousGroupe').empty();
			$('select.SousGroupe').append( retourSuccess );
		break;
 
		case 'SousGroupe' :
			$('#resultat').empty();
			$('select.SousSousGroupe').empty();
			$('select.SousSousGroupe').append( retourSuccess );
		break;		
 
		case 'SousSousGroupe' :
			$('#resultat').empty();
			$('#resultat').append( $("select.Groupe").val()+'  '+ $("select.SousGroupe").val()+'  '+ $("select.SousSousGroupe").val() );
		break;
 
	}
}
}
 
function AfficheErreur(retourErreur){
	 $('#MessageJS').append( retourErreur );
}

RetourPHP.php

Code php :

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
 
<?php
if(isSet($_REQUEST['actionPOST'])){
	retourSelectFormaté();
}
 
function retourSelectFormaté(){
$IdSelectParent = $_POST['IdSelectParent'];
 
echo '
<option value="0">Selectionner ...</option>
<option value="'.$IdSelectParent.'_1">Sous-Groupe '.$IdSelectParent.'1</option>
<option value="'.$IdSelectParent.'_2">Sous-Groupe '.$IdSelectParent.'2</option>
<option value="'.$IdSelectParent.'_3">Sous-Groupe '.$IdSelectParent.'3</option>
<option value="'.$IdSelectParent.'_4">Sous-Groupe '.$IdSelectParent.'4</option>
<option value="'.$IdSelectParent.'_5">Sous-Groupe '.$IdSelectParent.'5</option>
<option value="'.$IdSelectParent.'_6">Sous-Groupe '.$IdSelectParent.'6</option>
<option value="'.$IdSelectParent.'_7">Sous-Groupe '.$IdSelectParent.'7</option>
<option value="'.$IdSelectParent.'_8">Sous-Groupe '.$IdSelectParent.'8</option>
<option value="'.$IdSelectParent.'_9">Sous-Groupe '.$IdSelectParent.'9</option>
<option value="'.$IdSelectParent.'_10">Sous-Groupe '.$IdSelectParent.'10</option>
';
 
 
}
 
?>

Si cela pollue le forum ou qu'il faut procéder autrement je suis preneur d'info.

**llaffont** · 25/08/2010, 21h31

RetourPHP.php peux très bien être un script d'interrogation BDD qui construira le second Select et ainsi de suite.

Retour.php

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
 
 
<?php
 
mysql_connect("localhost", "mysql_user", "mysql_password") or
die("Impossible de se connecter : " . mysql_error());
mysql_select_db("mydb");
 
 
if(isSet($_REQUEST['actionPOST'])){
	switch($_REQUEST['actionPOST']){
		case 'select_1':
			InterroBDD1();
		break;
 
		case 'select_2':
			InterroBDD2();
		break;
		//Et ainsi de suite tant qu'il y aura des select à remplir.
	}
	retourSelectFormaté();
}
 
function InterroBDD1(){
	$retourHTML = '
		<option value="0">Selectionner ...</option>
	';
	$IdSelectParent = $_POST['IdSelectParent'];
	$sql = 'SELECT idinfo, info FROM `BasePleinDInfo` WHERE `Id`='.$IdSelectParent;
	while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$retourHTML .='<option value="'.$row['idinfo'].'">'.$row['info'].'</option>';
	}
	echo $retourHTML;
}
 
function InterroBDD2(){
	$retourHTML = '
		<option value="0">Selectionner ...</option>
	';
	$IdSelectParent = $_POST['IdSelectParent'];
	$sql = 'SELECT idinfo, info FROM `BasePleinDInfo` WHERE `Id`='.$IdSelectParent;
	while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$retourHTML .='<option value="'.$row['idinfo'].'">'.$row['info'].'</option>';
	}
	echo $retourHTML;
}
?>

Invité · 26/08/2010, 13h50

Bonjour a toi !

trop super , ça mérite un

Encore bravo et merci !

**SpaceFrog** · 26/08/2010, 15h49

un rapport avec
http://siddh.developpez.com/articles/ajax/#LIV-A
?

Invité · 26/08/2010, 16h59

Envoyé par SpaceFrog

un rapport avec
http://siddh.developpez.com/articles/ajax/#LIV-A
?

Moi je ne connaissais pas, c'est vraiment super ton lien !
Merci

**llaffont** · 26/08/2010, 21h48

Envoyé par SpaceFrog

un rapport avec
http://siddh.developpez.com/articles/ajax/#LIV-A
?

Non ! Désolé je ne connaissais pas mais ça fait un trés bon complément

Comme j'en avais marre de répondre toujours à la même question.
J'ai ressortit ça.

**miabi** · 09/11/2010, 11h30

Juste une petite question, dans le cas d'une utilisation avec BDD comment mettre la fonction : retourSelectFormaté() ?
Merci

**elmanu13** · 24/05/2011, 16h50

Merci pour cette base bien utile !

J'ai toutefois une question pour la dernière partie, le retourPHP qui interroge une base de données.
Comment faire si mon interrogation du 3e select doit être fonction des 2 premiers ??
(plus clairement, comment récupérer le IdSelectParent et son IdSelectParent ?)

ma requête ressemble à ça en pur PHP (qui impose de recharger la page, d'ou mon envie de découvrir et utiliser AJAX)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

mysql_query("SELECT COUNT( * ) AS Enregistrements , System_type FROM ToolBase WHERE Customer='$Customer' AND Manufacturer='$Manufacturer'  GROUP BY System_type");

(j'ai un fichier de systèmes installés chez des clients, et on peut trouver les mêmes marques chez différent clients. Il faut donc un double WHERE pour isoler celui que je veux)

Merci d'avance !

**Chris1845** · 23/06/2011, 11h16

Bonjour,

Je suis intéressé par cette fonction mais je voudrais la modifier pour :

- Ne pas avoir le switch dans la fonction AfficheSuccess
- Activer les selects au fur et à mesure

je ne connais pas beaucoup le Javascript et Ajax et j'ai du mal à faire ce que je veux. J'essais de procéder comme suis:
j'ajoute la variable Phase:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Phase = 'select.'+$(Balise).attr("class")+1;

puis je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(Phase).append( retourSuccess );

Mais cela ne fonctionne pas.
Mes select ont pour nom et classe "1", "2" etc...

Pour la seconde partie mes recherches m'ont mené sur ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("id_du_select").disabled="true";

Mais je voudrais qu'ils soient disabled par défaut et activer le select suivant dès que l'on en sélectionne un (donc ="false") ou tout désactiver si l'on change le premier.

Merci.

**Chris1845** · 24/06/2011, 10h25

Pour ceux que ça interresse, pour la première partie mon erreur est là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Phase = 'select.'+$(Balise).attr("class")+1;

==>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Phase='select.'+(parseInt($(Balise).attr("class"))+1)

J'ai laissé tomber la 2e partie , voici le code final :

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
 
	function AfficheSuccess(retourSuccess)
		{
		for(i=sel;i<=nb;i++)
			{
			$('select.'+i).empty();
			if(i==sel)
				{
				$('select.'+i).append( '<option value="0">sélectionner</option>' );
				}else
					{
					$('select.'+i).append( '<option value="0">En attente</option>' );
					}
			}
		$(Phase).append( retourSuccess );
		}

J'ai également supprimé le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#resultat').empty();

qui ne sert à rien dans mon cas.

Les variables ajoutées:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
sel=parseInt($(Balise).attr("class"))+1, // conversion en entier de la classe 
Phase='select.'+sel, 
i=0, // variable pour la boucle
nb=5, // Nombre de select en tout

Liste de choix dans plusieurs SELECT [Sources]

Contribuez

Discussions similaires

Partager

Partager