[PHP-JS] Affichage liste déroulante

**Meloooo** · 12/01/2009, 14h41

Bonjour,
J'ai une liste déroulante, qui est alimentée par ma base de données... Le souci c'est que quand l'utilisateur sélectionne un élément de ma liste déroulante je voudrais que des images s'affichent selon ce qui l'a choisi. Je m'explique :
Dans ma liste déroulante j'ai : Vacances, Stage
Quand l'utilisateur choisis vacances, sa affiche les images de la catégorie vacances.

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
 
<?php
//connection a la BDD
	include('connection.php');
	include('index.php');
 
	// Séléction les noms des rubriques dans l'ordre alphabétique
	$req = ("SELECT NomRubrique FROM rubri order by NomRubrique asc");
	// Execution de la requete
	$result = mysql_query($req);
	?>
	<!-- Création de la liste déroulante -->
	Quelle rubrique voulez vous afficher ? 
	<select name="choix" >
	<option value="choix3" selected="selected">Choissisez votre rubrique !</option>
	<?php
	while ($donnees = mysql_fetch_array($result))
					{
					// Affichage du nom de la rubrique
 
						echo "<option value = '$donnees[NumeroRubrique]'>".$donnees['NomRubrique']. "</option>";
					}
	$test = $_POST['choix'];
 
	?>
	</select>
<br>
<?php

**cadoudal56** · 12/01/2009, 14h49

Hello,

Ta question concerne du javascript en réalité...
En gros, tu affiches une image comme ceci à l'endroit que tu souhaites.
Ensuite, tu places un évenement sur la liste déroulante de manière a ce que l'image change quand la sélection change

Code :

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

1
2
3
4
5
6
 
 
<img name="monimage" id="monimage" src="">
<select name="choix" onChange="document.monimage.src=this.value+'.jpg'">
....
</select>

Cela va demander quelques adaptations car je manque d'éléments, mais l'esprit y est...
@+
cadou

**d-Rek** · 12/01/2009, 14h49

Bon bah c'est côté Javascript alors !

Code :

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

1
2
3
4
5
6
7
8
9
function afficheImage(){
	var d=document.NomDuForm;
	var v=d.choix.options[d.choix.options.selectedIndex].value;
	switch(v){
		case 'vacances': var pix='vacances1.jpg'; break;
		case 'stage': var pix='mon_stage.gif'; break;
	}
	document.getElementById('show').innerHTML='<img src="'+pix+'">';
}

Code :

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

1
2
3
4
5
<form action="toto.php" method="post" name="NomDuForm">
<!-- blablabla -->
<select name="choix" onchange="afficheImage();">
<!-- blablabla -->
</form>

Code :

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

1
2
<b>Illustration :</b>
<div id="show"></div>

(>.<) cadoudal56 est trop rapide

**cadoudal56** · 12/01/2009, 14h52

Ton code a l'air plus compliqué...
Mais là c'est toi qui voit...
Tu peux faire plus court..

@+
cadou

**Meloooo** · 12/01/2009, 14h53

Merci pour vos réponses aussi rapides, mais le souci c'est que mes images sont stockées dans ma base de données ce qui veut dire que je ne peux pas faire le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
function afficheImage(){
	var d=document.NomDuForm;
	var v=d.choix.options[d.choix.options.selectedIndex].value;
	switch(v){
		case 'vacances': var pix='vacances1.jpg'; break;
		case 'stage': var pix='mon_stage.gif'; break;
	}
	document.getElementById('show').innerHTML='<img src="'+pix+'">';
}

Je voudrais qu'il m'affiche les images concernant les vacances ou le stage qui sont stockées dans la base de données.

**d-Rek** · 12/01/2009, 15h02

Alors PHP va cracher du Javascript.

Code Javascript :

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

1
2
3
4
5
6
7
8
9
var tab=new Array(
<?php
$req="SELECT * FROM images"; // tu fais ta requête pour lister code/image
$result = mysql_query($req);
while($data = mysql_fetch_array($result))'
	echo "new Array('".$data['code']."', '".$data['image']."')";
}
?>
);

Code Javascript :

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

1
2
3
4
5
6
7
8
function afficheImage(){
	var d=document.NomDuForm;
	var v=d.choix.options[d.choix.options.selectedIndex].value;
	for(var i=0; i<tab.length; i++){
		if(v==tab[i][0]){var pix=tab[i][1]; break;}
	}
	document.getElementById('show').innerHTML='<img src="'+pix+'">';
}

**cadoudal56** · 12/01/2009, 15h04

Les images sont réellement dans la base de données ?
Ou ce sont les chemins vers ces images ?

@+
cadou

**Meloooo** · 12/01/2009, 15h07

Oui pardon je me suis mal exprimée, ce sont bien sur les chemins des images qui sont stockées dans la base de données.
Je suis vraiment désolé mais le javascript et moi ca fait 8, si je pouvais avoir quelques explication sur le code que vous m'avez fournie que je comprends qu'a moitié, sa serait vraiment très gentil de votre part.

**Meloooo** · 13/01/2009, 11h34

Problème réglé sans javascript !

**s.n.a.f.u** · 13/01/2009, 12h15

Envoyé par Meloooo

Problème réglé sans javascript !

Il eut été de bon ton de donner au moins un synopsis de la solution.

**Meloooo** · 13/01/2009, 13h14

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
<?php
//connection a la BDD
	include('connection.php');
	include('index.php');
 
 
 
 
 
	// Séléction les noms des rubriques dans l'ordre alphabétique
	$req = ("SELECT NomRubrique, NumeroRubrique FROM rubri order by NomRubrique asc");
	// Execution de la requete
	$result = mysql_query($req);
	?>
	<!-- Création de la liste déroulante -->
	Quelle rubrique voulez vous afficher ? 
	<form action="rubrique.php" method="POST">
	<select name="choix">
	<option value="0" selected="selected">Choissisez votre rubrique !</option>
 
 
 
	<?php
	while ($donnees = mysql_fetch_array($result))
					{
					// Affichage du nom de la rubrique
					?>
 
						<?php
						"<option value = '$donnees[NumeroRubrique]'>".$donnees['NomRubrique']. "</option>";
					}
 
	?>
	</select>
	<input type="submit" name="button"> 
	</form>
<br>
<?php
 
if (isset ($_POST['choix']))
	{
	$x = $_POST['choix'];
 
 
	// Parcours résultat
	$requete = "SELECT LienImage as miniature,ImageAgrandie FROM imagereduite WHERE NumeroRubrique = ".$x;
		// Execution de la requete
		$resultat = mysql_query($requete);
 
		while ($donnee = mysql_fetch_array($resultat))
		{
 
			// Affichage des photos reduites et agrandies
			echo '<a href="photos/agrandies/'.$donnee[1].'" rel="lightbox"><img border="0" src="photos/reduites/'.$donnee[miniature].'">;</a>';
 
		}
	}
else
{
	//Requete séléction rubrique
	$req = "SELECT * FROM rubri ;";
	// Execution de la requete
	$result=mysql_query($req);
	// Parcours résultat
 
	while ($row= mysql_fetch_array($result))
	{
 
 
		// Deux colonnes qui correspondent à LienImage et à ImageAgrandie
		echo $row[0]." ".$row[1];
		// Requete permettant l'affichage des images reduites et agrandies
 
		$requete = ("SELECT LienImage as miniature,ImageAgrandie FROM imagereduite WHERE NumeroRubrique = ".$row[0]);
		// Execution de la requete
		$resultat = mysql_query($requete);
 
		while ($donnee = mysql_fetch_array($resultat))
		{
 
			// Affichage des photos reduites et agrandies
			echo '<a href="photos/agrandies/'.$donnee[1].'" rel="lightbox"><img border="0" src="photos/reduites/'.$donnee[miniature].'">;</a>';
 
		}
 
 
	}
 
}

Voila jml94 c'est fait

[PHP-JS] Affichage liste déroulante

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager