la partie jquery
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
<tr>
<td><b>Province :</b></td>
<td><select class="select" name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Select a Category</option>
<?php getTierOne(); ?>
</select>
</td>
<td><b>Ville :</b></td>
<td><span id="wait_1" style="display: none;">
<img alt="Please Wait" src="cssstyle/imdesign/ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
</td>
</tr>
<tr>
La fonction php qui est appelé en début de la page php avec le code HTML<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT tier_one FROM two_drops")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
echo '<option value="'.$tier['tier_one'].'">'.$tier['tier_one'].'</option>';
}
}
//**************************************
// First selection results //
//**************************************
if(@$_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('sources/config.php');
$result = mysql_query("SELECT * FROM two_drops WHERE tier_one='$drop_var'")
or die(mysql_error());
echo '<select class="select" name="tier_two" id="tier_two">
<option value=" " disabled="disabled" selected="selected">Choose one</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
$tier_two = $drop_2['tier_two'];
echo '<option value="'.$tier_two.'">'.$tier_two.'</option>';
}
echo '</select> ';
}
?>