Bonjour,
J'ai 3 liste déroulante qui s'enchaine, le contenue de la seconde dépend du "select" de la première et de même pour la troisième en fonction de la seconde.
Ce que j'essaye de faire est de masquer la seconde si rien n'est selectionné dans la première et de même pour la troisième en fonction de la seconde... En gros la selection dans la première liste déroulante affiche la seconde et pareil sur la troisième.
Voici le code js pour le traitement des listes:
Code Javascript :
var ajax = new Array();
function getStateList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_state').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createState(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function getCityList(sel)
{
var stateCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(stateCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?stateCode='+stateCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createState(index)
{
var obj = document.getElementById('dhtmlgoodies_state');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
//handleDependencies(currentbox)
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
Code HTML :
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getStateList(this)">
<?php
$sql = 'SELECT * FROM pays ORDER BY pays_int';
$query = mysql_query($sql) or die( 'Erreur' );
while ( $g = mysql_fetch_array( $query ))
{
echo '<option value="'.$g['id_pays'].'">'.$g['pays_int'].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>State: </td>
<td><select id="dhtmlgoodies_state" name="dhtmlgoodies_state" onchange="getCityList(this)">
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
Pour l'histoire du masquage quand pas "select" j'ai "bricolé" en java un truc du genre:
Code Javascript :
function handleDependencies(currentbox)
{
if(document.getElementById(currentbox.getAttribute("dependant")) != null)
{
document.getElementById(currentbox.getAttribute("dependant")) .style.display = "";
}
}
Avec dans les balises "select" du code html un "dependant":
Code HTML :
<select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getStateList(this)" dependant="dhtmlgoodies_state">
<select id="dhtmlgoodies_state" name="dhtmlgoodies_state" onchange="getCityList(this)" dependant="dhtmlgoodies_city">
<select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
Mais je sèche un peu sur la suite là...
Je sais pas trop à quel moment on applique la fonction "handleDependencies(currentbox)" et surtout si je m'égare pas un peu là.
Bref si quelqu'un peu m'aiclairer ou me guider se serait grandiose.