Passer le focus à la zone suivante

Bonjour,

J'ai un (petit) souci.
Pouvez-vous m'aider à remplacer les "???" ?

Ce que je souhaiterais, c'est :
Quand je lance la fonction suivante par html :

        <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>

Si "categorie" contient :
- ou 1 seule option dans le select,
- ou rien du tout;
c'est d'effetuer les opérations suivantes :
- d'exécuter le script ;
- passer le focus à la zone suivante, c'est-à-dire "categorie+1"
- démarrer la fonction pour cette "categorie+1"

<!--
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);
	}
	if (nodes.length < 2) {
		???
	}
}
-->

[/i][/i]

Je pense que tu pourrai déjà utiliser JQuery pour plus de lisibilité.

Ensuite, tu pourras te servir des sélecteurs JQuery qui sont très puissants.

Par exemple, pour faire les 2 actions :

var obj = $(this).next('select');
obj.focus();
var id = obj.attr('id').replace('categorie', ''); 

request(obj, id);

Et sans utiliser jquery...
vu qu'il s'agit ici d'un code pour des select en cascade !
D'avance merci à tous

jytest a écrit :
Et sans utiliser jquery...
vu qu'il s'agit ici d'un code pour des select en cascade !

La création dynamique d'éléments dans le DOM ne pose pas de problèmes à jQuery, notamment grâce aux fonctions delegate() et live()

(mais après c'est toi qui voit hein…)

J'avoue que je n'ai pas trop compris la remarque non plus ?
JQuery est un Framework, donc il facilite le développement, et dans sa toute dernière version, le moteur pour les sélecteurs est vraiment performant.

Bref, c'est de loin le meilleur Framework que j'ai vu. Et via un CDN et Gzippé, il fait 30Ko à charger.

Donc tu devrais t'en servir et rendre ton code propre et utiliser sa "puissance" pour finir ton script.