|
|
|
|
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.
Configuration: Windows Vista Safari 531.9.1
Salut,
|
Voila un script simple. Il y a deux pages, La page principale et celle appelée par la fonction AJAX.
<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...). |
Fais voir ton code que j'essaie de voir ou est l'erreur.
<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. Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire. |
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".
|
Pourquoi ça ne fonctionnerait pas ?
|
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...
|
2 balise select dépendantes Attributs balise select Balise javascript Balise select html css Cache balise select Correction menu deroulant balise select bug ie6 Html select multiple Insert into select Iomega select 500 go Largeur balise select Probleme windows 7 select cd-rom boot type Select count(select Select distinct Select from where Select imbriqué Select sequence sql Valeur par défault balise select Xsl apply-templates select
