[AJAX] Sous-menu dynamique

**Carlitos** · 20/03/2007, 13h16

Bonjour à tous,

Je souhaiterai savoir comment créer en PHP un formulaire avec des sous-menus?
Je m'explique dans mon premier menu j'ai la liste de toutes les marques autos, dès que j'ai sélectionné AUDI par exemple je souhaiterai q'un deuxième menu m'affiche que les modèles liés à Audi ...

Merci d'avance pour votre aide

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
41
42
43
<form method="post">
    <label>
        Sélectionnez votre marque ?<br />
        <select name="marque" size="4">
            <option value="Alfa Roméo">Alfa Roméo</option>
            <option value="Audi">Audi</option>
            <option value="Citroen">Citroën</option>
            <option value="Peugeot">Peugeot</option>
            <option value="Renault">Renault</option>
        </select>
		<input type="submit" value="OK"/>
 
    </label><br /><br />
</form>
 
<form method="post">
    <label>
        Sélectionnez votre modèle ?<br />
        <select name="modele" size="4">
            <option value="147">147</option>
            <option value="159">159</option>
            <option value="C1">C1</option>
			<option value="C2">C2</option>
			<option value="C3">C3</option>
			<option value="C4">C4</option>
            <option value="107">107</option>
			<option value="207">207</option>
			<option value="307">307</option>
			<option value="307 SW">307 SW</option>
			<option value="407">407</option>
			<option value="407 SW">407 SW</option>
			<option value="Clio">Clio</option>
			<option value="Laguna">Laguna</option>
			<option value="A3">A3</option>
			<option value="A4">A4</option>
			<option value="A5">A5</option>
			<option value="A6">A6</option>
			<option value="A8">A8</option>
			</select>
		<input type="submit" value="OK"/>
 
    </label><br /><br />
</form>

**tigunn** · 20/03/2007, 13h41

Salut Carlitos

Tu peux utiliser le javascript pour définir une fonction qui modifieras le contenu de ta seconde liste déroulante.
il y a tout ce qu'il te faut dans la FAQ Javascript

bon dev'

**trotters213** · 20/03/2007, 14h03

Envoyé par tigunn

Tu peux utiliser le javascript pour définir une fonction qui modifieras le contenu de ta seconde liste déroulante.

Un brin d'explication : PHP est exécuté côté serveur tandis que Javascript l'est du côté client donc si tu veux que ta page se modifie lors d'un clic dans une liste déroulante sans avoir à recherger la page, alors tu dois utiliser du Javascript.
Si tu veux le faire en PHP, tu devras à chaque requête recharger la page.

**Carlitos** · 20/03/2007, 14h06

Merci, je ne connais pas le javascript mais je vais essayer d'essayer

! Il n'y aps moyen uniqument avec hmtl/php, ou bien même avec une base mysql?

Avez-vous un bout de code à me fournir pour effectuer un test?

Carl.

Invité · 20/03/2007, 14h49

Sinon utilise ajax (un ensemble de fonction pour javascript), le cas que tu demande est presente dans quasiement tout les tutotiaux ajax.

**tigunn** · 20/03/2007, 16h06

voila, je ferais pas plus (et la quasi totalité est un copier coller de la faq):

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
<html>
<script language="javascript">
/**
* Remplace le contenu du select désigné par la liste présente dans data.
* @param idSelect identifiant du select à modifier
* @param data liste associative (clé/valeur) des values et texte des options à créer
* @param selectedKey la clé selectionnée
*/
function updateComboBox (idSelect,data,selectedKey) {
	var monSelect = document.getElementById(idSelect);
	monSelect.options.length = 0;
	var selected;
	i=0;
	for (var key in data) {
		// permet de choisir le champs à definir par defaut
		if (selectedKey == key) {
			selected = i;
		}
		monSelect.options[monSelect.length] = new Option(data[key],key);
		i++;
	}
	//permet de positionner la combo au bon champs
	monSelect.selectedIndex = selected;
}
var data = new Array(147,188,219);
</script>
<form id="form1" method="post">
    <label>
        Sélectionnez votre marque ?<br />
        <select id="select1" name="marque" size="4">
            <option value="Alfa Roméo" onclick="updateComboBox('select2',data,1)">Alfa Roméo</option>
            <option value="Audi">Audi</option>
            <option value="Citroen">Citroën</option>
            <option value="Peugeot">Peugeot</option>
            <option value="Renault">Renault</option>
        </select>
    </label><br /><br />
</form>
<form id="form1" method="post">
    <label>
        Sélectionnez votre modèle ?<br />
        <select name="modele" id="select2" size="4">
            <option value="147">147</option>
            <option value="159">159</option>
            <option value="C1">C1</option>
			<option value="C2">C2</option>
			<option value="C3">C3</option>
			<option value="C4">C4</option>
            <option value="107">107</option>
			<option value="207">207</option>
			<option value="307">307</option>
			<option value="307 SW">307 SW</option>
			<option value="407">407</option>
			<option value="407 SW">407 SW</option>
			<option value="Clio">Clio</option>
			<option value="Laguna">Laguna</option>
			<option value="A3">A3</option>
			<option value="A4">A4</option>
			<option value="A5">A5</option>
			<option value="A6">A6</option>
			<option value="A8">A8</option>
			</select>
    </label><br /><br />
</form>
</html>

**Carlitos** · 20/03/2007, 17h23

Merci beaucoup Tigunn, je vais tester cela desuite

A bientôt!
Carl.

[AJAX] Sous-menu dynamique

JavaScript

Discussions similaires

Partager

Partager