construire un select avec innerHTML

**sosophie** · 08/03/2007, 12h25

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 08/03/2007, 12h47

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 08/03/2007, 15h29

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.

**pc.bertineau** · 08/03/2007, 15h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**XtoX** · 08/03/2007, 16h02

A mon avis, le innerHTML n'est pas fait pour ajouter des éléments à une balise, mais pour lui ajouter du contenu.

**SpaceFrog** · 08/03/2007, 16h10

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

**pc.bertineau** · 08/03/2007, 16h22

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 ?

**SpaceFrog** · 08/03/2007, 16h33

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

**pc.bertineau** · 08/03/2007, 16h41

ce serait le code php qui renverrait un tableau formatté dans une variable javascript ?
pourrais-tu me montrer un exemple basique stp ?

**SpaceFrog** · 08/03/2007, 16h59

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

**pc.bertineau** · 08/03/2007, 17h10

ok, merci beaucoup !

**sekaijin** · 11/03/2007, 10h01

Envoyé par SpaceFrog

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sosophie** · 12/03/2007, 10h21

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**pc.bertineau** · 12/03/2007, 15h11

Envoyé par sosophie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

construire un select avec innerHTML

JavaScript

Discussions similaires

Partager

Partager