copie de select avec cloneNode [Résolu]

nouvinfo · 13/01/2011, 03h08

Bonjour en plus d'être un débutant c'est la première fois que je poste dans un forum:
voici mon problème: je voudrais, en cliquant sur un bouton, copier une liste déroulante située avant ce bouton.

voici mon code dans le <body>:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
   <body>
			<select id="liste_service" name='te0'>
			<option value='faux'>---choisissez---</option>
			<?php // création de la liste à partir d'une bd mySQL
			while ($row=mysql_fetch_array($resultat,MYSQL_NUM))
			{
			echo '<option value="'.$row[1].'">'.$row[0].' ('.$row[2].') </option>';
			}
			?>
			</select></br></br>
			<input type='button' value='une autre liste' id='sup' onClick='creer_liste()'>
			<div id="div" style="display:none;"></div>
			</body>

et voici dans le <head>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
			<title>test</title>
 
			<script type="text/javascript">
				function creer_liste()
				{
				var selectexistant = document.getElementById('liste_service');
				var div_place = document.getElementById('div');
				var newselect = selectexistant.cloneNode(true);
				div_place.appendchild(newselect);
				}
 
			</script>
			</head>

resultat: lorsque je lis le code à partir de IE, la liste s'affiche bien mais lorsque je clique sur le bouton 'une autre liste' ça ne fait rien
Pouvez-vous maidez svp?

vermine · 13/01/2011, 07h48

Bonjour à vous,

Une toute petite remarque pour commencer mais rien de grave. Nous sommes sur le forum Javascript donc nous préférons voir le code Javascript et le HTML généré. Le code PhP ne nous aide pas, en fait, il nous trompe souvent.

Ceci étant dit, je constate deux choses sur la même <div> :

Code :

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

<div id="div" style="display:none;"></div>

Donner "div" comme id est audacieux. Ce terme étant le nom d'un tag html, il est déconseillé de l'utiliser comme id, nom de variable, etc.
Ensuite, la <div> est cachée. Peut-être que votre seconde liste se crée bien mais si vous n'affichez pas la <div>, vous ne risquez pas de voir le résultat.

Code :

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

1
2
3
 
div_place.style.display="";
div_place.appendchild(newselect);

nouvinfo · 18/01/2011, 01h22

déja escuse-moi pour le retard de ma réponse (période de cyclone sur le territoire)
merci pour ta reponse j'ai trouvé l'erreur.

dans le body

Code :

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

1
2
3
4
5
6
7
8
<body>
			<select id="liste_service" name='te0'>
			<option value='faux'>---choisissez---</option>
                                   //liste de tous les services
			</select></br></br>
			<input type='button' value='une autre liste' id='sup' onClick='creer_liste()'>
			<div id="div" style="display:none;"></div>
       </body>

dans le head:

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
 
<head>
			<title>test</title>
 
			<script type="text/javascript">
				function creer_liste()
				{
				var selectexistant = document.getElementById('liste_service');
				var div_place = document.getElementById('div');
				var newselect = selectexistant.cloneNode(true);
 
div_place.style.display="";
div_place.appendchild(newselect);
 
				}
 
			</script>
			</head>

Et ça marche merci bcp!!

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email