|
|
|
|
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...
|
Balise hide Balise html Balise html dans reponse ajax Balise image html Balise select hypertexte Balise style over Disque dur externe iomega select 1 to Eviter les doublons dans une liste d'une balise select Insérer lignes sql select Javascript select dynamique Page d'accueil over blog balise méta Reboot and select proper boot device Reboot and select proper boot device or insert boot media in selected boot device and press a key Recuperer le nom de balise xml c# Requetes select into sql Select css Select onchange Test disque dur externe iomega select portable 250 go 2,5
