Ajouter des liens à des listes déroulantes liées

**Teelakla** · 27/04/2011, 23h39

Bonsoir,

Je souhaite mettre en place un ensemble de listes déroulantes liées les unes aux autres pour que la dernière d'entre elles débouche sur l'ouverture d'une page web spécifique aux choix sélectionnés. J'ai fait quelques recherches mais mon problème me parait vraiment trop spécifique, je n'ai pas suffisamment de connaissances pour croiser mon cas avec les solutions que j'ai pu lire par ci par là..

J'ai mis en application la solution donnée partie "IV-A. Listes liées" de ce lien :

http://siddh.developpez.com/articles/ajax/#LIV-A

Après modifications pour mon usage particulier, tout fonctionne, les listes s'affichent et sont bien dépendantes. Seulement je ne sais pas comment déboucher sur l'ouverture d'une page.

J'ai les 3 fichiers équivalents à auteurs.php, ajaxLivre.php et la requete SQL. Mais je ne sais pas dans lequel je dois agir et comment.

J'espère que je suis assez clair, n'hésitez pas à me demander davantage de précision.

D'avance merci,

Teel

**Vil'Coyote** · 28/04/2011, 09h35

il faudrait agir sur ta dernière liste celle comprenant les liens vers la page souhaité. de la sur un on change tu peux effectuer donc une redirection en javascript ou ajax en fonction de ton choix.

**Teelakla** · 28/04/2011, 09h41

Bonjour,
Merci de votre aide,

Le problème est que justement je ne sais où placer les liens en rapport avec les choix.

**Teelakla** · 30/04/2011, 11h12

Personne n'a une idée ? Je souhaite simplement que la selection d'une choix de la deuxieme liste engendre l'ouverture d'une page spécifique par choix. Mais je ne sais sur lequel des trois fichiers agir et avec quel code. Je suis vraiment débutant.

J'ai fait beaucoup de recherches mais la plupart des reponses sont pour des choses bien plus complexes et les reponses apportées sont d'experts à experts, j'ai du mal à suivre.

Merci

**NoSmoking** · 30/04/2011, 16h51

Bonjour,
comme dit par Vil'Coyote, c'est ton dernier SELECT qui doit contenir le lien, exemple

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<script type="text/javascript">
function fctChange( url){
  if( url){
    alert( url); // a toi d'en faire ce que tu veux
  }
}
</script>
</head>
<body>
  <select onchange="fctChange( this.value);">
    <option>Votre Choix</option>
    <option value="acceuil.html">Acceuil</option>
    <option value="photos.html">Photos</option>
    <option value="contact.html">Contact</option>
  </select>
</body>
</html>

**Teelakla** · 26/05/2011, 19h22

Bonjour,
Merci de m'avoir répondu et désolé de ne répondre que maintenant, j'étais pris par un autre projet.

Je ne sais pas où placer ce code, j'ai éventuellement ce bout de code qui me semble exploitable, mais je ne peux pas écrire une ligne par choix, tous les choix sont entrés dans la base de données mysql.

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
<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("sql.XX.fr","XXX","XXX");
						mysql_select_db("XX");
						$res = mysql_query("SELECT * FROM auteur ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>

Je ne m'en sors pas, j'ai suivi à la lettre le tutoriel cité plus haut et impossible seul de l'adapter pour ouvrir une page à la sélection d'un choix.

Merci encore de m'aider,

Teel

**andry.aime** · 27/05/2011, 08h07

Bonjour,

Je n'ai pas pu lire le fils depuis le début (trop de boulot) mais modifie l'id ou le name de l'un de ces éléments:

En fait, IE confond le name et l'id , n'utilise pas le même valeur pour un name et id de différents éléments.

A+.

**Teelakla** · 27/05/2011, 12h39

Envoyé par andry.aime

Bonjour,

Je n'ai pas pu lire le fils depuis le début (trop de boulot) mais modifie l'id ou le name de l'un de ces éléments:

En fait, IE confond le name et l'id , n'utilise pas le même valeur pour un name et id de différents éléments.

A+.

Merci c'est toujours ça de pris, je le corrigerai dans la version finale, mais de toute façon c'est destiné à être utilisé dans une webapp, donc pour des mobiles types Android, iPhone, Blackberry, Bada OS et donc pas IE.

Personne n'a une idée ?

**12monkeys** · 28/05/2011, 00h31

Bonjour

Voilà à quoi cela devrait ressembler :

Il faut bien sur que la valeur de $row["id"] corresponde à une page web du genre "nomauteur.html" qui soit valide...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function gotonewpage(what)
{
  value = what.options[what.selectedIndex].value;
  if (value == "") return;
  window.location.href = value;
}
</script>
</head>
<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange="gotonewpage(this)">
					<option value='-1'>Aucun</option>
					<?
                                                mysql_connect("sql.XX.fr","XXX","XXX");
                                                mysql_select_db("XX");
                                                $res = mysql_query("SELECT * FROM auteur ORDER BY nom");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
                                                }
                                        ?>
				</select>
			</fieldset>
		</form>
	</body>
</html>

**Teelakla** · 28/05/2011, 15h37

Bonjour,
Merci de votre aide.
Une fois ce code inséré, où est-ce que je devrai placer la liste de pages web à associer aux choix sélectionnés ?

**12monkeys** · 28/05/2011, 20h53

Avec ce code c'est la valeur de l'attribut value se trouvant dans chaque balise <option> qui est utilisé pour le renvoi.

Si cette valeur est par exemple "nomartiste.html" tu sera renvoyé sur le fichier "nomartiste.html".

Que fait ton code php -> il lit les données de la base de données. En l’occurrence il utilise comme valeur de l'attribut 'value' ce qu'il trouve dans la colonne 'id' de ta table 'auteur'. Reste plus qu'à associer le nom du fichier vers lequel tu veux renvoyer avec ces valeurs de cette table.

**Teelakla** · 01/06/2011, 14h07

Bonjour,
Désolé mais j'ai beau retourner le code dans tous les sens je n'arrive toujours pas à comprendre comment lier une valeur de ma BDD à un lien..

J'ai réussi à obtenir de renvoyer vers Google en cliquant sur le choix "test". Mais c'est totalement indépendant de la première liste..

Je n'arrive pas à faire que les choix fournis par ma BDD renvoient à un lien spécifique chacun.

Pourriez vous me donner un bout de code exemple ?

Dans tous les cas merci beaucoup de m'aider.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function gotonewpage(what)
{
  value = what.options[what.selectedIndex].value;
  if (value == "") return;
  window.location.href = value;
}
</script>
</head>
<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange="gotonewpage(this)">
					<option value='-1'>Aucun</option>
					<option value='http://google.fr'>test</option>
					<?
                                                mysql_connect("sql.XX.fr","XXX","XXX");
                                                mysql_select_db("XX");
                                                $res = mysql_query("SELECT * FROM auteur ORDER BY nom");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
                                                }
                                        ?>
				</select>
			</fieldset>
		</form>
	</body>
</html>

**NoSmoking** · 01/06/2011, 17h01

relis bien ce qui a été écrit plusieurs fois et notamment

Envoyé par 12monkeys

Il faut bien sur que la valeur de $row["id"] corresponde à une page web du genre "nomauteur.html" qui soit valide...

vérifies le cas échéant en affichant le code la page générée...

**Teelakla** · 01/06/2011, 18h33

Je viens de vérifier le code source de la page générée, et les valeurs des "id" sont des chiffres, le rang auquel chaque choix est fixé, exemple :

Code html :

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

1
2
3
4
(...)
<option value='2'>xxx</option>
<option value='3'>xxx</option>
(...)

J'ai bien essayé de remplacer ces chiffres par les noms des pages à lier mais la requête SQL échoue.

**NoSmoking** · 01/06/2011, 18h57

Envoyé par Teelakla

J'ai bien essayé de remplacer ces chiffres par les noms des pages à lier mais la requête SQL échoue.

il te manque visiblement un champ dans ta base de données, le champ page par exemple...

**12monkeys** · 01/06/2011, 21h43

Déjà dire que la requête SQL échoue sans préciser en quoi elle échoue, ce qui se passe, etc... ça fait pas avancer le schmilblick !!

Déjà là le contenu de value correspond à un chiffre, or j'avais bien dit qu'il fallait que ça corresponde au nom de ta page. Il manque donc l'extension ! Alors commence déjà par la rajouter :

Code php :

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

echo "<option value='".$row["id"].".html'>".$row["nom"]."</option>";

Maintenant si ton id c'est 1 et que tu as une page qui s'appelle 1.html au même niveau de l'arborescence que cette page, ton renvoi fonctionnera.

Après il faudra peut être modifier ta base de données pour l'adapter à tes besoins, mais tu pourrait aussi remplacer $row["id"] par $row["nom"] ainsi tes pages appelées auraient le nom de l'auteur.

**Teelakla** · 02/06/2011, 14h39

J'ai ajouté une colonne page à la deuxième table de la base de données, celle qui contient les choix de la deuxième liste déroulante.

J'ai réussi à faire que cela fonctionne en ne travaillant d'abord que sur la première liste. Ainsi j'avais une liste déroulante avec mes choix et lorsque je la sélectionnais cela me renvoyait vers le lien indiqué dans la colonne page de la BDD. Seulement maintenant lorsque je reviens à une page avec deux listes liées, la première indique bien à la seconde les choix à afficher mais le lien n'est pas effectif.

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
<form>
			<fieldset style="width: 700px">
				<legend>Selection Ligne</legend>
				<label>Ligne</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Choisir une ligne</option>
                     <?
                                                mysql_connect("sql.XX.fr","xxxx","xxxx");
                                                mysql_select_db("xxx");
                                                $res = mysql_query("SELECT * FROM auteur ORDER BY nom");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"].".html'>".$row["nom"]."</option>";
                                                }
                                        ?>
 
				</select>
				<label>Destination</label>
				<select name='livre' id='livre' onChange="gotonewpage(this)">
					<option value='-1'>Aucun</option>
					</select>
				</div>
			</fieldset>
		</form>

J'imagine qu'il faut que j'ajoute un deuxième bout de code comme celui ci :

Code php :

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

1
2
3
4
5
6
7
8
<?
						mysql_connect("sql.XX.fr","xxxx","xxxx");
						mysql_select_db("xxx");
						$res = mysql_query("SELECT * FROM auteur ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"].".html'>".$row["nom"]."</option>";
						}
					?>

En dessous des balises concernant la deuxième liste, mais j'ai essayé avec diverses options et rien de fonctionnel..

**NoSmoking** · 02/06/2011, 21h57

Code php :

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

echo "<option value='".$row["id"].".html'>".$row["nom"]."</option>";

je verrais plutôt

Code php :

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

echo "<option value='".$row["page"].".html'>".$row["nom"]."</option>";

mais j'ai du mal à suivre dans le chainage de tes requêtes
- 1st SELECT -> choix de l'auteur -> affichage 2nd SELECT
- 2nd SELECT -> choix des livres -> redirection
est ce bien cela, car dans ce que je visualise de tes codes j'en doute!!!

**Teelakla** · 02/06/2011, 22h00

- 1st SELECT -> choix de l'auteur -> affichage 2nd SELECT
- 2nd SELECT -> choix des livres -> redirection
est ce bien cela, car dans ce que je visualise de tes codes j'en doute!!!

C'est exactement ce que je cherche à faire !

Mais je n'y parviens pas. En utilisant ce code :

Code :

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

echo "<option value='".$row["page"].".html'>".$row["nom"]."</option>";

La deuxième liste reste vide..

**12monkeys** · 02/06/2011, 22h28

J'en étais resté au rechargement de la page pour ma part, j'avais pas saisi le problème des 2 listes.

Donc je vois que tu n'as pas mis le code javascript pour le rafraichissement sur les 2 select. C'est quoi cette fonction javascript go() ? Elle fais quoi ?

Je mettrais la fonction javascript gotonewpage(this) sur le 1er select en mettant dans les option le code suivant :

Code php :

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

	echo "<option value='nom_page.html?auteur=".$row["nom"]."'>".$row["nom"]."</option>";

Où nom_page.html serait le nom de ta page courante.

Ainsi tu récupère le nom de l'auteur sélectionné via $_GET['auteur']. Tu vas utiliser cette variable pour faire la recherche des livres de cet auteur :

Code php :

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

1
2
	$auteur = $_GET['auteur'];
	$res = mysql_query("SELECT livre FROM livres WHERE auteur='$auteur'");

En supposant que dans ta base tu ais une table livres contenant une colonne livres dans laquelle se trouve le nom des livres et une colonne auteur avec le nom de l'auteur du livre. A adapter à ta base de données.

Puis tu utilises $row["livre"] pour l'injecter dans les <option> comme tu as fait au dessus.

Bon y a mieux que ça par exemple la méthode dans le 1er tutoriel que tu cites, ceci est une autre méthode 'moins propre'...

c'est déjà un début. Essaye d'intégrer tout ça et dis nous...

Ajouter des liens à des listes déroulantes liées

Discussions similaires

Partager

Partager