Tiwikisource : http://siddh.developpez.com/articles/ajax/#LIV-A
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test select dynamique</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type='text/javascript'>
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supportéar le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
/**
* Méode qui sera appelésur le click du bouton
*/
function go(){
var xhr = getXhr();
// On déni ce qu'on va faire quand on aura la rénse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçet que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('appli').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","test.php",true);
// ne pas oublier çpour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('site');
idsite = sel.options[sel.selectedIndex].value;
xhr.send("idSite="+idsite);
}
</script>
</head>
<body>
<h1>coucou</h1>
<form method="POST" action="test2.php">
<label for="Sites">Sites :</label>
<select name="site" id="site" onchange='go()'>
<option value="no" selected="selected">Sélectionner</option>
<option value="CLE">CLE</option>
<option value="LHA">LHA</option>
<option value="MCA">MCA</option>
<option value="UGB">UGB</option>
<option value="UPL">UPL</option>
<option value="SFM">SFM</option>
<option value="STA">STA</option>
<option value="DPE">DPE</option>
<option value="SOV">SOV</option>
<option value="LEM">LEM</option>
<option value="FDB">FDB</option>
<option value="REV">REV</option>
<option value="SOM">SOM</option>
<option value="TAN">TAN</option>
<option value="ORA">ORA</option>
<option value="CSP">CSP</option>
</select><br/>
<label for="Appli">Appli :</label>
<div id='appli' style='display:inline'>
<select name="appli">
<option value='-1'>Choisir d'abord un site</option>
</select>
</div>
<input type="submit" value="Envoyer"/>
</form>
</body>
</html>
<?php
echo "<select name='appli'>";
if(isset($_POST["idSite"])){
mysql_connect("localhost","*****","****");
mysql_select_db("******");
$res = mysql_query("SELECT DISTINCT Application FROM file_password
WHERE site='".$_POST["idSite"]."' ORDER BY Application");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["Application"]."'>".$row["Application"]."</option>";
}
}
echo "</select>";
?>