Balise select

Résolu/Fermé

hichamdeb Messages postés 125 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 17 mars 2020 - 11 nov. 2009 à 19:33
Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 - 14 nov. 2009 à 16:25

Bonjour,
comment mettre deux balises select l'une en fonction de l'autre comme sur le lien ci-dessous.
http://www.dhtmlgoodies.com/scripts/ajax-chained-select/ajax-chained-select.html

MErci d'avance.

A voir également:

Balise select
Balise br - Forum CSS
Balise HTML ✓ - Forum HTML
Saut de lignes sans ✓ - Forum Webmastering
Please select boot device - Forum Windows
Please select boot device - Forum Matériel & Système

14 réponses

Réponse 1 / 14

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7
12 nov. 2009 à 14:29

Voila un script simple. Il y a deux pages, La page principale et celle appelée par la fonction AJAX.

Page 1 :

<head>
<title> Nom de la page</title>
<script type="text/javascript">

function getXhr() {
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
  else if(window.ActiveXObject)
   {
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
  else
   {
    alert("Le navigateur ne supporte pas les objets XMLHTTPRequest, il faut le mettre à jour");
    xhr = false;
   }
}


function aj_search (clef) {
	getXhr();
		
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("Option2").innerHTML = xhr.responseText;
		}
	}
	var data = 'opt1='+clef
	
	xhr.open("POST",'page_option2.php',true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=ISO-8859-1');
	xhr.send(data);
}
</script>
</head>

<body>
	<label for="dom">Champ1</label>
		&nbsp;
		<select name="Champ1" id="Champ1" onchange="aj_search (this.value);" >
			<option value="opt1a">opt1a</option>
			<option value="opt1b">opt1b</option>
			<option value="opt1c">opt1c</option>
		</select>
		
<div id="Option2">
	<script type="text/javascript">
	aj_search("opt1a");
	</script>
</div>
</body>

Et la page appelée (page 2):


<label for="Option2">Option2</label>
	<select name="Champ2" id="Champ2">
<?php
	if(isset($_POST['opt1'])){
		$opt1 = $_POST['opt1'];
	}
	
	if($opt1 == 'opt1a'){
		echo "
			<option value='opt2a'>opt2a</option>
			<option value='opt2b'>opt2b</option>
			<option value='opt2c'>opt2c</option>
		";
	}
	elseif($opt1 == 'opt1b'){
		echo "
			<option value='opt2d'>opt2d</option>
			<option value='opt2e'>opt2e</option>
			<option value='opt2f'>opt2f</option>
		";
	}
	elseif($opt1 == 'opt1c'){
		echo "
			<option value='opt2g'>opt2g</option>
			<option value='opt2h'>opt2h</option>
			<option value='opt2i'>opt2i</option>
		";
	}
?>
</select>

Bon après tes listes tu les génères comme tu veux (à partir d'un tableau, d'une base de données...).

Réponse 2 / 14

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
11 nov. 2009 à 20:53

Tu remarques que tu as la réponse dans ta question ?

Réponse 3 / 14

hichamdeb Messages postés 125 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 17 mars 2020 9
12 nov. 2009 à 12:04

heu !! je voie pas la réponse !

Réponse 4 / 14

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7
12 nov. 2009 à 12:15

Salut,

Il faut utiliser AJAX pour faire ce que tu veux réaliser.
D'où la réponse dans la question : "ajax-chained-select". ^^

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 14

hichamdeb Messages postés 125 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 17 mars 2020 9
12 nov. 2009 à 12:24

-_-" je sais qu'il faut utiliser ajax, mais je travail très peux avec. Est ce que vous avez un code source?

Réponse 6 / 14

hichamdeb Messages postés 125 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 17 mars 2020 9
12 nov. 2009 à 16:55

apparemment c'est la bonne solution, mais je ne voie pas comment sa fonctionne, j'ai crée deux pages comme tu m'a dis, mais il me sort qu'un seul champ !

Réponse 7 / 14

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7
12 nov. 2009 à 17:49

Fais voir ton code que j'essaie de voir ou est l'erreur.

A priori je vois 2 possibilités. Soit la page 2 comporte une erreur et ne s'affiche donc pas, soit dans la page 1 le code suivant (que tu as adapté) ne se trouve pas entre les balises <body> et </body>.

<script type="text/javascript">
	aj_search("opt1a");
	</script>

Dans le 2nd cas changer la valeur du premier select devrait afficher le code de la seconde page, si ce n'est pas le cas, il doit y avoir une erreur dans la page 2.

Mais montre ton code ça sera plus simple. ;)

Réponse 8 / 14

hichamdeb Messages postés 125 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 17 mars 2020 9
12 nov. 2009 à 18:33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Nom de la page</title>
<script type="text/javascript">

function getXhr() {
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
  else if(window.ActiveXObject)
   {
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
  else
   {
    alert("Le navigateur ne supporte pas les objets XMLHTTPRequest, il faut le mettre à jour");
    xhr = false;
   }
}


function aj_search (clef) {
	getXhr();
		
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("Option2").innerHTML = xhr.responseText;
		}
	}
	var data = 'opt1='+clef
	
	xhr.open("POST",'page_option2.php',true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=ISO-8859-1');
	xhr.send(data);
}
</script>
</head>

<body>
	<label for="dom">Champ1</label>
		&nbsp;
		<select name="Champ1" id="Champ1" onchange="aj_search (this.value);" >
			<option value="opt1a">opt1a</option>
			<option value="opt1b">opt1b</option>
			<option value="opt1c">opt1c</option>
		</select>
		
<div id="Option2">
	<script type="text/javascript">
	aj_search("opt1a");
	</script>
</div>


<label for="Option2">Option2</label>
	<select name="Champ2" id="Champ2">
<?php
	if(isset($_POST['opt1'])){
		$opt1 = $_POST['opt1'];
	}
	
	if($opt1 == 'opt1a'){
		echo "
			<option value='opt2a'>opt2a</option>
			<option value='opt2b'>opt2b</option>
			<option value='opt2c'>opt2c</option>
		";
	}
	elseif($opt1 == 'opt1b'){
		echo "
			<option value='opt2d'>opt2d</option>
			<option value='opt2e'>opt2e</option>
			<option value='opt2f'>opt2f</option>
		";
	}
	elseif($opt1 == 'opt1c'){
		echo "
			<option value='opt2g'>opt2g</option>
			<option value='opt2h'>opt2h</option>
			<option value='opt2i'>opt2i</option>
		";
	}
?>
</select>



</body>
</html>

PS : j'ai essayé de faire deux page differente, mais sa marche pas !

Réponse 9 / 14

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
12 nov. 2009 à 19:26

AJAX n'est a utilisé que si les données renvoyées sont différentes (base de données, ...). Si en fonction du choix c'est toujours la même chose qui s'affiche (par ex. pour "Europe" : France, Belgique et Suisse) alors autant écrire les listes puis les masquer. Ensuite, lors du onchange sur une liste, on affiche la liste suivante qui correspond.

Réponse 10 / 14

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7
13 nov. 2009 à 10:27

Si tu mets tout dans la même page, ça ne marchera pas, la fonction search affiche dans le div "Option2" la page "page_option2.php".

Après ce n'était qu'un exemple avion-f16, j'avais bien dit :
Bon après tes listes tu les génères comme tu veux (à partir d'un tableau, d'une base de données...).

Je montre comment on peut l'utiliser, après je sais pas ce qu'on va en faire. ^^

Réponse 11 / 14

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
13 nov. 2009 à 18:00

Pourquoi ça ne fonctionnerait pas ?
Ma solution n'a pas besoin d'AJAX.
En plus, il n'y a aucun intérêt à l'utiliser si le résultat retourné est toujours le même en fonctionne de la valeur de la première liste.
Voilà un exemple.

Réponse 12 / 14

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7
13 nov. 2009 à 18:14

J'ai pas dit que ta proposition ne marcherait pas, en fait si il n'y a rien à prendre dans une base de données, c'est plus accessible et ça reviens au même. Tu as du mal me comprendre.Enfin c'est pas grave...

Je disais que ce qu'avait mis hichamdeb ne pouvait pas fonctionner. Vu que le code AJAX que j'ai donné fait appel à une seconde page. Si tout est sur la même page ce n'est pas fonctionnel...

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
13 nov. 2009 à 18:19

Ah ok, je croyais que tu t'adressais à moi ...
Je remets ça sur le dos de la fatigue, heureusement que le week-end est là.

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7 > avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024
13 nov. 2009 à 18:30

Ouai, tellement pratique cette fatigue des fois. :p

Week-end =)

Réponse 13 / 14

hichamdeb Messages postés 125 Date d'inscription mercredi 12 septembre 2007 Statut Membre Dernière intervention 17 mars 2020 9
14 nov. 2009 à 10:13

Merci infiniment Meelas, en fait le pb c'est que j'au mis le code (2) entre des balises body.
tu m'a sauvé la vie =)

Réponse 14 / 14

Meelas Messages postés 15 Date d'inscription lundi 19 octobre 2009 Statut Membre Dernière intervention 16 novembre 2009 7
14 nov. 2009 à 16:25

Parfait, si ça marche tant mieux. ^^

Discussions similaires

la balise ou

ou ou

Aide Please select boot device

Balise

"Reboot and Select proper Boot Device"