Bonjour,
j'essaie de faire un script qui me permette de créer un élément HTML à partir d'un élément existant. Je fais un formulaire qui possède des listes déroulantes dont le contenu est généré avec php. Je voudrais que lorsqu'on clique sur un bouton se trouvant à côté, une liste similaire réapparaisse. afin de pouvoir faire un deuxième choix, un troisième et ainsi de suite. J'ai réussi tant bien que mal à recréer cette liste, lui affecter des valeurs et des noms aux balises <option>. Seulement voilà : cela ne marche qu'à moitié avec IE (6) et Firefox 1.5. La liste se recrée bien mais entre chaque <option> créée se trouve une autre balise <option> créée et avec pour valeur "undefined". Pour une liste de 4 choix j'ai 5 "undefined" !
Je pense avoir un problème avec la boucle mais je ne vois pas lequel...
Voici le code :
Je suis assez frustré parce que je suis un débutant JavaScript et j'avais presque réussi... mais là après des heures passées la-dessus j'en peux plus...
Je vous remercie par avance de vos suggestions et / ou remarques !
Sébastien
j'essaie de faire un script qui me permette de créer un élément HTML à partir d'un élément existant. Je fais un formulaire qui possède des listes déroulantes dont le contenu est généré avec php. Je voudrais que lorsqu'on clique sur un bouton se trouvant à côté, une liste similaire réapparaisse. afin de pouvoir faire un deuxième choix, un troisième et ainsi de suite. J'ai réussi tant bien que mal à recréer cette liste, lui affecter des valeurs et des noms aux balises <option>. Seulement voilà : cela ne marche qu'à moitié avec IE (6) et Firefox 1.5. La liste se recrée bien mais entre chaque <option> créée se trouve une autre balise <option> créée et avec pour valeur "undefined". Pour une liste de 4 choix j'ai 5 "undefined" !
Je pense avoir un problème avec la boucle mais je ne vois pas lequel...
Voici le code :
<head>
<script language = "Javascript" type = "text/Javascript">
function NewList()
{
var node1=document.createElement("BR");
var node2=document.createElement("SELECT");
document.getElementById("cell1").appendChild(node1);
document.getElementById("cell1").appendChild(node2);
//on definit la balise name et la balise value pour le select//
for(j=0; j<document.getElementById("cell1").childNodes.length; j++){
node2.setAttribute("name","select"+j);
node2.setAttribute("value","select"+j);
}
//on cree les noeuds options avec un nom et une valeur et on recupere el contenu du select a copier//
for(i=0; i<document.getElementById("select").childNodes.length; i++){
var node3=document.createElement("OPTION");
node3.setAttribute("value",document.getElementById("select").childNodes.item(i).value);
node3.setAttribute("name","option"+i);
document.getElementById("cell1").lastChild.appendChild(node3);
var option=document.getElementById("select").childNodes.item(i);
var newOption=document.getElementById("cell1").lastChild.lastChild;
newOption.innerHTML=option.innerHTML;
}
}
</script>
</head>
<body>
<form name = "form1">
<table name = "p1">
<tr name = "row1">
<td id = "cell1" name = "cell1">
<select name = "select" id = "select">
<option name = "option0" id = "option0" value = "option0">option0</option>
<option name = "option1" id = "option1" value = "option1">option1</option>
<option name = "option2" id = "option2" value = "option2">option2</option>
<option name = "option3" id = "option3" value = "option3">option3</option>
</select>
</td>
</tr>
</table>
<input type = "button" value = "Inserer" onClick = "NewList();"/>
</form>
</body>Je suis assez frustré parce que je suis un débutant JavaScript et j'avais presque réussi... mais là après des heures passées la-dessus j'en peux plus...
Je vous remercie par avance de vos suggestions et / ou remarques !
Sébastien