Balise select
Résolu
hichamdeb
Messages postés
125
Date d'inscription
Statut
Membre
Dernière intervention
-
Meelas Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
Meelas Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
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.
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.
14 réponses
Voila un script simple. Il y a deux pages, La page principale et celle appelée par la fonction AJAX.
Page 1 :
Et la page appelée (page 2):
Bon après tes listes tu les génères comme tu veux (à partir d'un tableau, d'une base de données...).
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>
<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...).
Salut,
Il faut utiliser AJAX pour faire ce que tu veux réaliser.
D'où la réponse dans la question : "ajax-chained-select". ^^
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
-_-" je sais qu'il faut utiliser ajax, mais je travail très peux avec. Est ce que vous avez un code source?
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 !
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>.
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. ;)
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. ;)
<!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>
<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 !
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.
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. ^^
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. ^^
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.
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.
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...
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...
