[DOM] Ajouter des options à une liste déroulante [Résolu]

[beegees]

Bonjour à tous,

J'ai du code qui permet de générer une liste déroulante :

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
29
30
31
32
33
34
35
36
function Choix(event){
	//alert(event.target.value);
	//alert(event.target.name);
	if(event.target.value == -1) return false;
	else
	{
		switch (event.target.name){
			case "GFAP" :
				var txt = new Array ('Diffus','Focal');
			break;
			case "2":
				var txt = new Array ('Radioactivité','Information','Mesures');
			break;
			case "3" :
				var txt = new Array ('Philosophie','Psychologie','Humour');
			break;
		}
		//creation des listes deroulantes avec le DOM
		var div = event.target.parentNode;
 
		var ld_Pattern = document.createElement('select');					
		ld_Pattern.id = "Pattern";
		ld_Pattern.onchange=function(){
			irm_liste_selection('neuro_irm_emplacements_cotes#'+event.target.value+'#sel_sides_'+i);
		};
		div.appendChild(ld_Pattern);
 
		var PatternOption = document.createElement('option');
 
		// option.value???
		ld_Pattern.appendChild(PatternOption);
 
		var TextNode=document.createTextNode('-----');
		PatternOption.appendChild(TextNode);
	}
}

J'aurais voulu insérer des options dans cette liste.

Les options seraient les valeurs de txt.

Je devrais donc les mettre ici :

Code :

1
2
3
var PatternOption = document.createElement('option');
 
		// option.value???

Je ne vois pas du tout comment le faire, auriez-vous une idée svp ?

Merci d'avance.

beegees

[jreaux62]

Bonjour,
le petit bout de code html qui va avec serait bienvenu.

[beegees]

Envoyé par jreaux62

Bonjour,
le petit bout de code html qui va avec serait bienvenu.

Bonjour,

Le voici :

Code :

1
2
3
4
5
 <select name="GFAP" onchange="Choix(event);">
            	<option value="-1">-----</option>
                <option value="1">Positif</option>
            	<option value="0">Negatif</option>
        	</select>

Merci pour ton aide.

beegees

[jreaux62]

+ expliquer plus clairement :
- ce que tu veux ajouter
- d'où proviendra la commande (onclick ? ...)
- d'où provient la value à ajouter ...

[beegees]

Envoyé par jreaux62

+ expliquer plus clairement :
- ce que tu veux ajouter
- d'où proviendra la commande (onclick ? ...)
- d'où provient la value à ajouter ...

Re,

Merci pour ta réponse.

Si la liste de sélection qui appelle "Choix" est "GFAP", j'aimerais alors ajouter ces options :

var txt = new Array ('Diffus','Focal');

Donc, les valeurs de txt.

De quelle commande onclick tu parles ?

beegees

[jreaux62]

Envoyé par beegees

De quelle commande onclick tu parles ?

Oublie. Je n'avais pas bien lu ta demande : "... Les options seraient les valeurs de txt."

As-tu testé sur IE (8) ? -> ca ne fonctionne pas !

Le mieux serait de faire ca en jquery.
Je pense qu'il y a une discussion récente là-dessus. (à voir ...)

[jreaux62]

Tiens ? tu as voté contre mon message ?
Dommage, moi qui recherchais la discussion en question ...
J'étais même prêt à t'écrire le code.

Tant pis. Ca ne donne plus vraiment envie de t'aider...
Bon dimanche.

[Auteur]

bonjour,

voici un exemple fonctionnel sous IE et FF (ça devrait le faire pour les autres navigateurs) :

Code javascript :

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
 
function addOptions()
{
	// Syntaxe :
	//new Option("Text","Value", "defaultSelected true / false", "selected true / false");
 
	var List = document.getElementById("idList");
	var elOption = new Array(
                    new Option("Choix 5", "Chx5", false, false),
                    new Option("Choix 6", "Chx6", false, false),
                    new Option("Choix 7", "Chx7", false, false)
                          );
 
	var i, n;
	n = elOption.length;
 
	for (i=0; i<n; i++)
	{
		List.options.add(elOption[i]);
	}
}
 
function selectedOption(List)
{
	var opt = List.options[List.selectedIndex];
	alert("valeur = " + opt.value + "\n" + "texte = " + opt.text);
}

Code html :

1
2
3
4
5
6
7
8
9
10
11
 
<input type="button" value="Ajouter les options" onclick="addOptions()" />
<br />
<br />
<select id="idList" name="GFAP" onchange="selectedOption(this)">
	<option value="" selected="selected">-- Faites votre choix --</option>
	<option value="Chx1">Choix 1</option>
	<option value="Chx2">Choix 2</option>
	<option value="Chx3">Choix 3</option>
	<option value="Chx4">Choix 4</option>
</select>

Le bouton permet d'ajouter dans la liste 3 options définies par l'objet Option (voir le code JS).
Lorsque tu sélectionnes une option une fonction est appelée sur l'événement onChange et la valeur et le texte de l'option sont affichés.


Petites remarques :
- j'ai ajouté un id au select ;
- je ne pense pas qu'il soit utile dans ton cas d'ajouter l'objet event en paramètre de ta fonction.

[beegees]

Salut Auteur,

Merci à toi pour ce code très clair.

Je l'utilise immédiatement.

Bon dimanche.

beegees