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.
<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>
<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>
<script type="text/javascript">
aj_search("opt1a");
</script>
<!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>
Vous n'aimez pas le lifting de Facebook ? Le site Mashable propose cinq étapes pour revenir à l'ancienne présentation du réseau social.
