Ajouter une menu déroulant en js dans une div

par **Cyrano** » 04 avr. 2007, 13:32

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

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

par **therafou** » 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>

par **therafou** » 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

par **Cyrano** » 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();

par **therafou** » 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.

par **Cyrano** » 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.

par **therafou** » 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

Ajouter une menu déroulant en js dans une div

Répondre

Étendre la vue Revue du sujet : Ajouter une menu déroulant en js dans une div

Ajouter une menu déroulant en js dans une div