Discussion :

[v0dka]

Bonjour,
je fais appel à vous pour un problème de listes déroulantes.

En fait j'ai 3 listes déroulantes qui doivent être "liées" :

-Liste livres.
-Liste chapitres.
-Liste pages.

Sachant que les livres sont dans des dossiers différents, contenants des dossier chapitres, contenant eux même des pages en .jpg.

Livres

|_ Chapitres

|_ Pages

Je souhaiterai que quand le visiteur choisisse un livre dans la liste déroulante, ça prenne en compte son choix pour lister ainsi les chapitres dans la liste correspondante (idem pour les pages)

En fait, admettons que je sélectionne le livre "Livre1" dans la première liste déroulante.
Il faudrait que la seconde liste déroulante se positionne dans http://monsite/Livre1/ pour y lister les dossiers Chapitre.

Et ainsi si je selectionne le "Chapitre1", la troisième liste va lister les pages dans http://monsite/Livre1/Chapitre1/

Je sais qu'il faut utiliser (à prioris) du javascript avec l'option onChange, mais je ne m'y connais pas du tout du tout.

Pourriez-vous m'aider ?

Merci.

[Bovino]

Un peu comme ici en somme ?

[v0dka]

Bonjour,
Mon problème semble être différent.

Voici mon code javascript :

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
function change_livre(livre) {
	if (livre != 0) {
		document.location = "http://monsite/" + livre;
	}
}
 
function change_chapitre(livre, chapitre) {
	if (livre != 0) {
		document.location = "http://monsite/" + livre + "/" + chapitre;
	}
}
 
function change_page(livre, chapitre, page) {
	if (livre != 0) {
		document.location = "http://monsite/" + livre + "/" + chapitre + "/" + page;
	}
}

Et voici le code php qui liste les dossiers Livres (il y a 3 codes semblable à celui là en tout (livres, chapitres, pages))

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
<!-- LISTER LIVRES -->
<?php $rep = "../"; 
$dir = opendir($rep); ?>
 
<?php 
echo "<select name=livre onchange=change_livre(this.value)>";
echo "<option value=0>Choisir un livre";
while ($f = readdir($dir)) 
{
	if(is_dir($rep.$f)) 
	{
		echo "<option value=$f>".$f;
		echo "</option>";
	}
} 
echo "</select><br /><br />";

On m'a dit qu'il faut que j'utilise un XMLHttpRequest au lieu du location qui me redirige vers le dossier, mais je ne sais pas du tout faire ...

[yann.morineau]

Salut,
Je débute en "Javascript/Ajax", voici comment je procède pour lier mes listes.

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
 
function ra2()
				{
					var count = Math.random();
					var choix = document.forms['ra'].selecttype.value;
					var ra2 = CreateXMLHttpRequest ();
					var method = 'GET';
					var filename = 'inc/ra2.php?choix='+choix+'&count='+count;
					ra2.open(method, filename, true);
					ra2.onreadystatechange = function(){
 
						if(ra2.readyState == 4)
						{
							var tmp = ra2.responseText;
							document.getElementById('ra2').innerHTML = tmp;
						}
					}
					ra2.send(null);
				}

var count : évite l'envoie de requêtes identiques (ca ne fonctionnerait pas sous IE),
var choix : récupération de la sélection de la liste,
CreateXMLHttpRequest () :

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
function CreateXMLHttpRequest () {
 
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.XMLHttpRequest)
			xhr = new XMLHttpRequest (); 
		else {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
	}
	else
		return null;
 
	return xhr;
}

, poucréer l'objet XMLHttpRequest,
method : ici j'utilise GET, tu peux aussi utiliser POST.(je te laisse chercher les infos dessus),
filename : fichier appelé par les requetes (celui qui traite les infos donnés en GET. Je fais passer les données récupérée dans l'url. Mon script php traite les données et renvoie les résultat.
var tmp = ra2.responseText : récupération du résultat,
document.getElementById('ra2').innerHTML = tmp : choix du div ou span (par son id) dans lequel les résultats seront affichés.
send() : sert pour l'utilisation de la méthod POST.

Mon développement de script n'est pas optimisé (demander aux pros comment ils font), j'ai une fonction par liste (en gros).
Ma première liste est sur ma page html principale. je récupère la sélection, je la fais passer dans l'url. Le php renvoie la seconde liste en fonction de la valeur reçue. La seconde liste s'affiche, je récupère le résultat... etc ...

Je ne suis pas calé en javascript/ajax, j'ai appris sur le tas, en lisant des tutoriaux.
Si ca peut t'aider...