[Résolu] Les listes liées dynamiques !

Bonjour à tous !

C'est peut-être trop évident pour vous !
Mon niveau ne me permet pas d'y arriver seul.
Pouvez-vous prendre le temps de m'aider ?

Dans une page HTML, j'utilise des listes liées dynamiques.
Liées car la liste suivante dépend du choix effectué par la précédente.
Dynamiques parce que lues dynamiquement dans MySQL.
Le langage utilisé est le javascript.
Car l'AJAX et le php sont plus lents.
Seules alternatives donc, le javascript (et le jquery).
Je sais que le jquery peut aider à sortir d'un souci.
Mais, j'ai eu beau rechercher sur internet comment gérer 3 listes (ou plus) liées dynamiques, je n'ai rien trouvé !!! Si vous connaissez un lien qui en traite, merci d'avance de me le communiquer !
Voilà pourquoi j'utilise sous la contrainte le javascript !

Voici mes souhaits que je n'arrive pas à réaliser :
1- Eviter le message d'erreur d'IE (toutes versions),
lorsque la liste suivante est vide !
2- Pour tous les naviguateurs,
a: lorsque la liste ne contient que 1 élément, que JS remplisse directement cette liste-là et passe automatiquement à la liste liée suivante.
b: lorsque la liste ne contient aucun élément, que JS remplisse à vide cette liste-là et passe alors à la liste liée suivante.

J'ai beau retourner le problème sous toutes ses coutures,
mes connaissances en JS sont trop faibles !
Pouvez-vous m'aider ?
Merci d'avance pour votre aide !!!

Voici le javascript (avant le </head>):

<script type="text/javascript" src="js/oXHR.js"></script>
<script type="text/javascript">
<!--
function request(oSelect,noSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr = getXMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML,noSelect+1);
			document.getElementById("loader0"+noSelect).style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader0"+noSelect).style.display = "inline";
		}
	}
	xhr.open("POST","php/cat.php?cat="+(noSelect+1),true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send("parent="+value);
	document.getElementById("tr0"+(noSelect+1)).style.display = "";
	for (iSelect=noSelect+2; iSelect<=9; iSelect++){
		if (noSelect<7) {
			document.getElementById("tr0"+iSelect).style.display = "none";
		} else {
			document.getElementById("tr0"+iSelect).style.display = "";
		}
	}
}

function readData(oData,noData) {
	var nodes = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("categorie0"+noData);
	var oOption, oInner;
	oSelect.innerHTML = "";		
	if (nodes.length > 1) {
		oOption = document.createElement("option");
		oInner = document.createTextNode("Choisissez, svp!");
		oOption.value = 0;
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);
		for (var i=0, c=nodes.length; i<c ; i++) {
			oOption = document.createElement("option");
			oInner = document.createTextNode(nodes[i].getAttribute("libelle"));
			oOption.value = nodes[i].getAttribute("id");
			oOption.appendChild(oInner);
			oSelect.appendChild(oOption);
		}
	} else {
		
	}
}
-->
</script>

Voici le fichier "js/oXHR.js" :

function getXMLHttpRequest() {
	var xhr = null;
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	return xhr;
}

Voici la page avec les codes HTML et php :

    <table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="310"></td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
        </tr>
        <tr>
        <td colspan="2" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
        <tr id="tr00">
        <td style="padding:7px;">Document</td>
        <td style="padding-left:5px;">
        	<select id="categorie00" style="width:280px;" onChange="request(this,0);">
            <option value="none">Choisissez, svp !</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY libelle");
				while ($back = mysql_fetch_assoc($query)) {
					echo "\t\t\t\t<option value='".$back['id']."' >".$back['libelle']."</option>\n";		
				}
			?>
            </select>
            <span id="loader00" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr01" style="display: none;">
        <td style="padding:7px;">Descriptif</td>
        <td style="padding-left:5px;">
        	<select id="categorie01" style="width:280px;" onFocus="request(this,1);" onChange="request(this,1);">
            </select>
            <span id="loader01" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr02" style="display: none;">
        <td style="padding:7px;">Format</td>
        <td style="padding-left:5px;">
        	<select id="categorie02" style="width:280px;" onFocus="request(this,2);" onChange="request(this,2);">
            </select>
            <span id="loader02" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr03" style="display: none;">
        <td style="padding:7px;">Papier</td>
        <td style="padding-left:5px;">
        	<select id="categorie03" style="width:280px;" onFocus="request(this,3);" onChange="request(this,3);">
            </select>
            <span id="loader03" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr04" style="display: none;">
        <td style="padding:7px;">Impression Recto</td>
        <td class="bold" style="padding-left:5px;">
        	<select id="categorie04" style="width:280px;" onFocus="request(this,4);" onChange="request(this,4);">
            </select>
            <span id="loader04" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr05" style="display: none;">
        <td style="padding:7px;">Impression Verso</td>
        <td class="bold" style="padding-left:5px;">
        	<select id="categorie05" style="width:280px;" onFocus="request(this,5);" onChange="request(this,5);">
            </select>
            <span id="loader05" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr06" style="display: none;">
        <td style="padding:7px;">Quantité</td>
        <td style="padding-left:5px;">
        	<select id="categorie06" style="width:280px;" onFocus="request(this,6);" onChange="request(this,6);">
            </select>
            <span id="loader06" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr07" style="display: none;">
        <td style="padding:7px;">Délai</td>
        <td style="padding-left:5px;">
        	<select id="categorie07" style="width:280px;" onFocus="request(this,7);" onChange="request(this,7);">
            </select>
            <span id="loader07" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
        </td>
        </tr>
        <tr id="tr08" style="display: none;">
        <td style="padding:7px;">Prix d'impression</td>
        <td style="padding-left:5px;"><span class="c14 bold"><?php echo $pvht."€ HT"; ?></span><span class="c10"><?php echo "( ".$pvht."€ TTC)"; ?></span></td>
        </tr>
        <tr id="tr09" style="display: none;">
        <td style="padding:7px;">&nbsp;</td>
        <td style="padding-left:5px;"><a href="panier.php">Ajouter au panier</a></td>
        </tr>
    </table>

[/i][/i]
Modifié par jytest (18 Nov 2011 - 13:41)

Je suis passé par un code javascript/ajax/php,
qui fonctionne du tonnerre !
Merci pour votre passage sur mon post
Modifié par jytest (18 Nov 2011 - 13:43)