Un select, une boucle PHP et un onChange : galère

Version imprimable

Bonjour à tous,

Ce post est mi javascript, mi php.

Soit un simple SELECT dont les OPTION sont générés avec une boucle qui parcourt une table mysql :
Code:

1 2 3 4 5 6 7 $sql = mysql_query("SELECT id, nom, critere FROM table order by id"); <select name="select" onChange="fonction(le param est dans la boucle)"> while($row = mysql_fetch_assoc($sql)){ // debut de la boucle echo "<option value='".$row['id']."'>".$row['nom']."</option>"; } </select>
Comme vous le voyez dans ce bout de code, le select récupère les id de la table. Cependant, le problème est que j'ai besoin de mettre un onChange sur ce select (sachant qu'on ne peut pas mettre d'évènement JS sur les OPTION). Ce onChange appelerait une fonction JS qui masquerait ou afficherait un DIV selon son paramètre. Or ce paramètre est le champ "critere" de la table...et il n'est lu que dans la boucle, soit après la balise SELECT...
Comment faire ? J'ai pensé à faire un truc du genre :
Code:

1 2 3 4 5 6 <select name="select" onChange="fonction(this.value)"> while($row = mysql_fetch_assoc($sql)){ // debut de la boucle echo "<option value='".$row['id']."*".$row['critere']."'>".$row['nom']."</option>"; } </select>
Puis dans la fonction JS, un genre d'explode sur la caractère * qui me permettrait de récupérer la valeur de "critere" et d'effectuer le traitement.
Mais quelqu'un aurait-il une soluce plus élégante ?
Je l'en remercie d'avance.

Tu peux rajouter ton élément critère en tant qu'attribut de tes options :

Code:

1
2
3
4
5
6
$sql = mysql_query("SELECT id, nom, critere FROM table order by id");
<select name="select" onChange="fonctionOnChange(this)">
while($row = mysql_fetch_assoc($sql)){ // debut de la boucle
echo "<option value='".$row['id']."' critere='".$row['critere']."'>".$row['nom']."</option>";
}
</select>

Alors, le w3c ne validera peut-être pas ton document HTML car l'attribut critere n'existe pas, mais bon...

Et ensuite, tu peux récupérer l'attribut de cette façon lorsque tu itères les options :

Code:

1
2
3
4
5
6
7
8
9
10
fonctionOnChange(select)
{
    var options = select.getElementsByTagName("option");
    for (var i=0;i<options.length;i++)
    {
        critere = options[i].attributes.getNamedItem("critere").value;
        // ou 
        critere = options[i].attributes.getAttribute("critere");
    }
}

A+

29/12/2009, 12h58
renaud26

Merci de ta réponse.
La piste est bonne, il me semble. Plutôt que critere="...." , je peux peut-^tre essayer id="" ou name="" ...
Je teste et je te dis...