construire un select avec innerHTML

Version imprimable

Bonjour

Je contruis un select avec un résultat de mysql et je veux le créer à la volée avec javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
		<SCRIPT LANGUAGE="Javascript">
parent.mainFrameF.document.getElementById("r").innerHTML=
'<select>'
<?
while($resfact=mysql_fetch_row($result))
{
	$NUM=$resfact[0];
	$MT=$resfact[1];
	?>
+'<option value="'+<?=$NUM?>+'"><?=$MT?>+'</option>'
<?
}
?>
+'</select>';
</script>

affiche une erreur / attendu et ca génére

Code:

1
2
3
4
5
6
7
 
 
parent.mainFrameF.document.getElementById("r").innerHTML=
'<select>'
+'<option value="'+031+'">960.17+'</option>'
+'<option value="'+034+'">31.24+'</option>'
+'</select>';

Merci pour votre aide

08/03/2007, 12h47
SpaceFrog

je deconseille fortement le innerHTML pour ajouter des options ...

Code:

Document.createElement('select')

puis tu définis le length des options et tu les renseignes ...

http://www.developpez.net/forums/sho...d.php?t=286002
08/03/2007, 15h29
Auteur

bonjour,

voici un exemple avec un forumlaire :
http://sergep.developpez.com/tutorie...ge=page_5#LV-B
Tu verras comment créer la balise select et ses options et quand insérer les options dans le select.
08/03/2007, 15h59
pc.bertineau

Citation:

Envoyé par SpaceFrog

je deconseille fortement le innerHTML pour ajouter des options ...

Bonjour,

ça m'intéresserait de savoir pourquoi tu déconseilles ça..
en fait j'ai un pb avec une liste déroulante remplie avec un innerHTML, fourni par un fichier php (AJAX). J'utilise php parce que je requête ma base en fonction d'un autre select : le grand classique!

Tout se remplit bien, je gère la plupart de mes cas mais lorsque je touche à mon deuxième select, IE6 me sort une erreur (code 0) à la ligne 1 de ma page courante, ce qui correspond à la ligne où je définis mon doctype :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR">

A vrai dire cette erreur n'a pas l'air d'influencer le contenu de mes select mais j'aimerais comprendre.

Je suis allé voir le site Quirksmode et je ne trouve rien... une iée ?
08/03/2007, 16h02
XtoX

A mon avis, le innerHTML n'est pas fait pour ajouter des éléments à une balise, mais pour lui ajouter du contenu.
08/03/2007, 16h10
SpaceFrog

oui innerHTML est bien fait pour ajouter du contenu genre texte ....

pour créer veritablement un objet sur la page et pour qu'il soit reconnu comme tel dasn toutes ses propriétés et focntion il faut privilégier le DOM (createElement, cloneNode ...)
Certains navigateur vont bien interpréter le innerHTML avec des balises, mais parfois l'element ainsi crée peut se retourvé boiteux et amputé d'une partie de ses propriétés et fonctionalités, et il arrive que l'on ne puisse pas les manipuler par le code ...
Ce qui n'est pas le cas des objets créés avec DOM
08/03/2007, 16h22
pc.bertineau

si j'ai bien compris, dans le cas du remplissage d'une liste déroulante :

- je récupère le nombre d'option à insérer
- et fais un xhr.send() pour chaque option ??

Faut-il donc écrire le script JS avec le innerHTML ?
Ou alors comment puis-je requêter ma base mysql puis renvoyer des infos à un script JS qui se chargerait lui de construire les noeuds nécessaires ?
:bug:
08/03/2007, 16h33
SpaceFrog

envoie juste tableau joiné avec un séparateur dasn une variable javascript ...
coté client tu splittes la varaible pour construire le select ...

sinon coté php tu boucles sur ton tableau pour ecrire le select et ses options ...mais ça suppose un rechargement complet de la page
08/03/2007, 16h41
pc.bertineau

ce serait le code php qui renverrait un tableau formatté dans une variable javascript ?
pourrais-tu me montrer un exemple basique stp ?
08/03/2007, 16h59
SpaceFrog

ben ton tableau php tu le transforme en chaine avec separateur avec implode ...
tu le colles dans une variable javascript et coté javascritp tu fais un split sur le meme séparateur ...
un grand classique ... ça doit être dans la faq ...
08/03/2007, 17h10
pc.bertineau

ok, merci beaucoup !
11/03/2007, 10h01
sekaijin

Citation:

Envoyé par SpaceFrog

je deconseille fortement le innerHTML pour ajouter des options ...

Code:

Document.createElement('select')

puis tu définis le length des options et tu les renseignes ...

http://www.developpez.net/forums/sho...d.php?t=286002

entièrement d'accord avec la grenouille de l'espace
il y a une discus sur le pb de la concision du code DOM vs Inner
il faut savoir que le inner n'existe que pour des raison historique depuis la normalisation ecmascript le DOM propose tout ce qu'il faut
http://www.developpez.net/forums/sho...d.php?t=257967

A+JYT

Merci pour toutes ces précisions, j'ai fait le code suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type='text/javascript'> var myselect = parent.mainFrameF.document.getElementById("testf") <? $lg=mysql_num_rows($result); ?> myselect.options.length=<?=$lg?>; for(i=0;i<myselect.length;i++){ <? while($resfact=mysql_fetch_row($result)) { $NUM=$resfact[0]; ?> myselect.options[i].innerHTML=" " +'<?=$NUM?>'; <? } ?> } </script>
La méthode du tableau sert à valoriser l'option et afficher plusieurs données dans le select, je suppose, je vais regarder de plus près.

Merci pour tout

Citation:
Envoyé par sosophie
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script type='text/javascript'> var myselect = parent.mainFrameF.document.getElementById("testf") <? $lg=mysql_num_rows($result); ?> myselect.options.length=<?=$lg?>; for(i=0;i<myselect.length;i++){ <? while($resfact=mysql_fetch_row($result)) { $NUM=$resfact[0]; ?> myselect.options[i].innerHTML=" " +'<?=$NUM?>'; <? } ?> } </script>
est-ce que ça marche aussi si la requête sur ta base doit être faite après la sélection sur une première liste déroulante ?
en clair : comment envoyer cette requête et récupérer les résultats dans le script js pour créer les options avec du DOM ? où placer le innerHTML pour récupérer le responseText dans la fonction js appelante ?