Ajouter une menu déroulant en js dans une div

Eléphanteau du PHP | 34 Messages

04 avr. 2007, 00:43

Bonjour ou Bonsoir,

Voilà j'ai une code qui ajout un champ en cliquant sur le lien ajouter.
la fonction addFile ajoute donc les champs à mon formulaire sans problème un champ file et text.
Mais pour simplifier le travail par la suite, j'aimerais savoir si je peux rajouter un combo (select ou menu déroulant) avec des choix définient avant, avec les deux champs déjà présentent.
j'ai cherché et je ne comprend pas trop comment faire:
ça doit être du style:
choix.file.setAttribute('type','combo');


voilà le code qui fonctionne sans le combo

Code : Tout sélectionner

<html> <head> <script> function addFile(idChamp) { try { var conteneur = document.getElementById(idChamp); var undiv = document.createElement('div'); var text_image = document.createTextNode('Image :'); var text_titre = document.createTextNode('Titre :'); var file = document.createElement('input'); var title = document.createElement('input'); file.setAttribute('type','file'); file.setAttribute('name','file[]'); file.setAttribute('value',''); file.size="20"; title.setAttribute('type','text'); title.setAttribute('name','title[]'); title.setAttribute('value',''); title.size="20"; undiv.appendChild(text_image); undiv.appendChild(file); undiv.appendChild(text_titre); undiv.appendChild(title); conteneur.appendChild(undiv); } catch(e) { alert(e); } } </script> </head> <body> <a href="#" onClick="javascript:addFile('divfile');">Ajouter</a> <form action="upload.php" id="picture" method="post"> <input type="hidden" name="posted" value="1"> <div id="divfile"></div> <input type="submit" value="Envoyer" /> </form> </body> </html>
Merci d'avance pour vos réponses

Mammouth du PHP | 19672 Messages

04 avr. 2007, 08:35

Ce que tu appelles un combo est une balise <select> suivi d'une ou plusieurs balises <option> : il te faut donc procéder de la même manière à quelques détails mineurs près :
-1- disposer de la liste des valeurs à afficher incluant la valeur à sélectionner par défaut;
-2- créer une balise select et lui ajouter les attributs appropriés;
-3- créer une boucle pour créer chaque option assortie de son attribut value et le cas échéant de l'attribut selected;
-4- ajouter la liste des options à ton select :

très sommairement :

Code : Tout sélectionner

var valeurs = array(); valeurs[0] = array('valeur 1', true); // true =< valeur sélectionnée par défaut (par exemple) valeurs[1] = array('valeur 2', false); //... etc.. //... var liste = document.createElement('select'); liste.setAttribute('name', 'maliste'); liste.setAttribute('id', 'maliste'); var nbOptions = valeurs.length; var item; for(var i = 0; i < nbOptions; i++) { item = document.createElement('option'); item.setAttribute('value', valeurs[i][0]); if(valeurs[i][1] == true) { item.setAttribute('selected', 'selected'); } liste.appendChild(item); }
Teste ça et reviens nous dire ce que tu auras obtenu.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 34 Messages

04 avr. 2007, 09:20

voilà je viens de faire l'ajout des différentes parties dans le script.
J'ai bien entendu testé avec FireFox et quand je clique sur le lien "ajouter" il me retourne un message d'erreur comme quoi array() is not defined avec le référenceur d'erreur.
Donc je ne comprends pas, j'ai donc testé en mettant un var devant chaque variable du tableau du style:
var valeurs[1] = array('valeur 2', false);
....

Il ne me retourne plus de message d'erreur et n'affiche toujour rien.

Désoler, je dois reconnaitre que mon niveau en JS est du niveau (copier/coller)


Source modifier avec le script de Cyrano:

Code : Tout sélectionner

<html> <head> <script> function addFile(idChamp) { try { var conteneur = document.getElementById(idChamp); var undiv = document.createElement('div'); var text_image = document.createTextNode('Image :'); var text_titre = document.createTextNode('Titre :'); var file = document.createElement('input'); var title = document.createElement('input'); // Déclaration de l'élément var liste = document.createElement('select'); // Déclaration du tableau var valeurs = array(); valeurs[0] = array('valeur 1', true); // true =< valeur sélectionnée par défaut (par exemple) valeurs[1] = array('valeur 2', false); valeurs[2] = array('valeur 3', false); valeurs[3] = array('valeur 4', false); valeurs[4] = array('valeur 5', false); // Déclaration des champs du formulaire liste.setAttribute('name', 'maliste'); liste.setAttribute('id', 'maliste'); file.setAttribute('type','file'); file.setAttribute('name','file[]'); file.setAttribute('value',''); file.size="20"; title.setAttribute('type','text'); title.setAttribute('name','title[]'); title.setAttribute('value',''); title.size="20"; // déclaration des variables pour la boucle var nbOptions = valeurs.length; var item; // mise en place de la boucle for(var i = 0; i < nbOptions; i++) { item = document.createElement('option'); item.setAttribute('value', valeurs[i][0]); if(valeurs[i][1] == true) { item.setAttribute('selected', 'selected'); } liste.appendChild(item); } // fin de la boucle undiv.appendChild(text_image); undiv.appendChild(file); undiv.appendChild(text_titre); undiv.appendChild(title); undiv.appendChild(liste); conteneur.appendChild(undiv); } catch(e) { alert(e); } } </script> </head> <body> <a href="#" onClick="javascript:addFile('divfile');">Ajouter</a> <form action="upload.php" id="picture" method="post"> <input type="hidden" name="posted" value="1"> <div id="divfile"></div> <input type="submit" value="Envoyer" /> </form> </body> </html>
Je continue à chercher de mon coté.

Encore merci à Cyrano.

Mammouth du PHP | 19672 Messages

04 avr. 2007, 12:04

Autant pour moi : en JavaScript, il faut écrire:

Code : Tout sélectionner

var xyz = new Array();
et non

Code : Tout sélectionner

var xyz = array();
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphanteau du PHP | 34 Messages

04 avr. 2007, 12:53

Pour ce qui est de new Array(), c'est exactement ça
Mais il ne faut pas oublie de mettre un A devant chaque array:

Code : Tout sélectionner

valeurs[0] = Array('valeur 1', true); valeurs[1] = Array('valeur 2', false); valeurs[2] = Array('valeur 3', false); valeurs[3] = Array('valeur 4', false); valeurs[4] = Array('valeur 5', false);
Mais maintenant, il y a un autre problème. le menu s'affiche bien avec le nombre de choix possible. Mais il n'affiche pas le variable dans le menu déroulant, soit quand on le déroule l'on retrouve bien en espace le nombre d'item mais pas leur valeur affiché.

Pour voir directement ce que celà donne voilà le lien:
http://therafou.free.fr/stockage/add_picture.html

Eléphanteau du PHP | 34 Messages

04 avr. 2007, 13:32

Modif pour l'affichage des valeurs dans la liste.

il faut mettre:
item.innerHTML=valeurs[0];

entre

item.setAttribute('value', valeurs[0]);

et

if(valeurs[1] == true)


bon encore une poste pour dire que cela fonctionne donc merci à Cyrano.

voilà le code complet et bonne utilisation (info le code n'est pas optimisé)

Code : Tout sélectionner

<html> <head> <script> function addFile(idChamp) { try { var conteneur = document.getElementById(idChamp); var undiv = document.createElement('div'); var text_image = document.createTextNode('Image :'); var text_titre = document.createTextNode('Titre :'); var file = document.createElement('input'); var title = document.createElement('input'); // Déclaration de l'élément var liste = document.createElement('select'); // Déclaration du tableau var valeurs = new Array(); valeurs[0] = Array('valeur 1', true); // true =< valeur sélectionnée par défaut (par exemple) valeurs[1] = Array('valeur 2', false); valeurs[2] = Array('valeur 3', false); valeurs[3] = Array('valeur 4', false); valeurs[4] = Array('valeur 5', false); // Déclaration des champs du formulaire liste.setAttribute('name', 'maliste[]'); liste.setAttribute('id', 'maliste'); file.setAttribute('type','file'); file.setAttribute('name','file[]'); file.setAttribute('value',''); file.size="20"; title.setAttribute('type','text'); title.setAttribute('name','title[]'); title.setAttribute('value',''); title.size="20"; // déclaration des variables pour la boucle var nbOptions = valeurs.length; var item; // mise en place de la boucle for(var i = 0; i < nbOptions; i++) { item = document.createElement('option'); item.setAttribute('value', valeurs[i][0]); item.innerHTML=valeurs[i][0]; if(valeurs[i][1]) { item.setAttribute('selected', 'selected'); } liste.appendChild(item); } // fin de la boucle undiv.appendChild(text_image); undiv.appendChild(file); undiv.appendChild(text_titre); undiv.appendChild(title); undiv.appendChild(liste); conteneur.appendChild(undiv); } catch(e) { alert(e); } } </script> </head> <body> <a href="#" onClick="javascript:addFile('divfile');">Ajouter</a> <form action="upload.php" id="picture" method="post"> <input type="hidden" name="posted" value="1"> <div id="divfile"></div> <input type="submit" value="Envoyer" /> </form> </body> </html>
Modifié en dernier par therafou le 04 avr. 2007, 13:35, modifié 4 fois.

Mammouth du PHP | 19672 Messages

04 avr. 2007, 13:32

Il manque effectivement un élément, corrigé :

Code : Tout sélectionner

var nbOptions = valeurs.length; var item; // déclaration de la variable item var affichage; // déclaration de la variable affichage for(var i = 0; i < nbOptions; i++) { // On crée la balise option item = document.createElement('option'); // On ajoute l'attribut value dans la balise option item.setAttribute('value', valeurs[i][0]); // Si la valeur est le choix par défaut, on ajoute l'attribut selected if(valeurs[i][1] == true) { item.setAttribute('selected', 'selected'); } // On crée la valeur qui sera affichée. affichage = document.createTextNode(valeurs[i][0]); // On insère la valeur affichée pour la balise option. item.appendChild(affichage); // On ajoute l'option dans la liste liste.appendChild(item); }
Un site très pratique où tu trouveras toutes les références avec des exemples : http://fr.selfhtml.org/navigation/quickbar/index.htm
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe: