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

Version imprimable

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

21/08/2011, 13h40
Invité

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

Citation:

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

21/08/2011, 13h45
Invité

+ expliquer plus clairement :
- ce que tu veux ajouter
- d'où proviendra la commande (onclick ? ...)
- d'où provient la value à ajouter ...
21/08/2011, 13h47
beegees

Citation:

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 :

Citation:

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

Donc, les valeurs de txt.

De quelle commande onclick tu parles ?

beegees
21/08/2011, 13h52
Invité

Citation:

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 ...)
21/08/2011, 14h40
Invité

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.

bonjour,

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

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
 
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:

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.

21/08/2011, 15h20
beegees

Salut Auteur,

Merci à toi pour ce code très clair.

Je l'utilise immédiatement.

Bon dimanche.

beegees
23/11/2017, 00h46
cashmir

Bonsoir

Est ce que c est possible au lieu d ouvrir une page en choisissant un option qui rajoute une autre boite en dessous pour choisir d autre option ?
23/11/2017, 22h58
Watilin

Sujet de bac de philo :
un déterrage de topic est-il entièrement la faute de la personne qui déterre le topic ?

Vous avez quatre heures.
23/11/2017, 23h01
beegees

Citation:

Envoyé par Watilin

Sujet de bac de philo :
un déterrage de topic est-il entièrement la faute de la personne qui déterre le topic ?

Vous avez quatre heures.

J'adore, en plus, un de mes topic qui date de plus de 7 ans.

Après, pourquoi pas... lol
23/11/2017, 23h19
Watilin

Je ne faisais que réagir à mon voisin du dessus.

Mais 8O L’éminent Beegees qui me répond personnellement, ça c’est un honneur ! Ça n’a pas toujours été le cas. J’avais répondu à une de tes questions il y a longtemps, et tu avais comme disparu soudainement de la circulation. Peu après un habitué m’avait contacté par MP pour me dire que c’était coutumier avec toi. Dame, je n’ai plus ça dans mes archives, c’est trop vieux, mais je me souviens qu’il y avait une histoire de radioguidage… :mouarf:
24/11/2017, 11h14
beegees

à en croire ce poste, j'avais répondu... et mis résolu....