Afficher un nouveau formulaire de type select

Version imprimable

Bonjour,

Voilà j'ai un élément de type select créé en php et je voudrais le dupliquer si on appuie sur un lien "Ajouter un DVD". J'ai fait quelque chose qui ne marche pas et qui n'ai pas forcément très bien (ca fait vraiment pas longtemps que je fais du javascript).

Voici la fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var nbbloc = 1; var texte_base = ""; function changeMessage() { nbbloc++; texte2 = document.getElementById(\"bloc\").innerHTML; // Le formulaire est dans ce bloc if (nbbloc == 2) { texte_base = texte2; texte_base.replace(/selected=\"selected\"/,\"\"); } dvdselect = document.forms['form_dvd'].elements['dvd'].selectedIndex; texte_modif = texte_base; chaine = '\"dvd'+nbbloc+'\"'; texte_modif.replace(/\"dvd\"/,chaine); texte2 = texte2+'<br/>'+texte_modif; document.getElementById(\"bloc\").innerHTML = texte2; }
Quand j'exécute la fonction, la liste déroulante est bien ajoutée par contre je me perds l'option sélectionnée. D'après ce que j'ai compris, le javascript ne considère plus le select comme un select (document.forms['form_dvd'].elements['dvd'] n'est plus trouvé au 2eme clic) donc je n'arrive pas à faire document.forms['form_dvd'].elements['dvd'].options[dvdselect].selected = true;

Si quelqu'un a une solution plus simple ou une piste, je suis preneur.

Merci beaucoup :)

EDIT : J'ai trouvé une fonction qui cache une partie du texte donc je pourrais créer les select les cacher ou les faire réapparaitre. Le seul problème c'est que je serai obligé de limiter à x select.

salut,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
	<head>
		<title>select</title>
		<script type='text/javascript'>
			function ajoutDvd(){
				model = document.getElementById('dvdbase');
				nouv = model.cloneNode(true);
				nouv.options[model.selectedIndex].selected = true;
				document.body.appendChild(nouv);
			}
		</script>
	</head>
	<body>
		<input type='button' onclick='ajoutDvd()' value='Ajouter' />
		<select name="dvd[]" id='dvdbase'>
			<option />bla
			<option />bli
			<option selected='selected'/>blo
		</select>
	</body>
</html>

essayes de penser au balises code s'il te plait.

Merci beaucoup j'ai essayé et ca marche pas encore dans mon code mais ma télévision vient de rendre l'âme et il se fait tard alors je verrais ça demain.

Enfin j'ai modifié un peu le code pour copier juste avant le bouton :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> <head> <title>select</title> </head> <body> <script type='text/javascript'> function ajoutDvd(){ model = document.getElementById('blocdvd'); nouv = model.cloneNode(true); // document.body.appendChild(nouv); document.getElementById('bloc').insertBefore(nouv,document.getElementById('boutondvd')); } </script> <div id='bloc'> <div id='blocdvd'> DVD Selectionne :<select name="dvd[]" id='dvdbase'> <option />bla <option />bli <option selected='selected'/>blo </select> </div> <input type='button' onclick='ajoutDvd()' value='Ajouter' id='boutondvd' /> </div> </body> </html>
Par contre, je ne comprends pas comment "on" fait pour reconnaître le 1er select du 2eme. A priori je pensais qu'on récupérait les valeurs $dvd[0], puis $dvd[1] mais ça me parait un peu magique (et donc ca ne marche pas). Je regarderai ça mieux demain.