Valeur de liste déroulante

Bonjour,

Après recherches sur les forums (et sur la FAQ), je bloque. Je souhaite récupérer la valeur d'un élément sélectionné dans une liste déroulante. Au final, je veux ajouter l'élément de liste sélectionné dans une autre zone de liste (liste déroulée), au clic sur un bouton.

Je cherche à tester déjà si j'arrive à récupérer la valeur de l'élément de liste sélectionné, et c'est là que ça coince... Je précise que ma liste déroulante est alimentée par une table d'une base de données et donc une boucle en PHP.

Code Javascript utilisé :

Code:

---

1 2 3 4 5

function getSelectValue(select_intervention) { var intSelect = document.getElementById('select_intervention'); return intSelect.options[intSelect.selectedIndex].text; } var intSelectValue = getSelectValue(select_intervention);

---

Code HTML :

Code:

---

<img src="ajouter.png" alt="Bouton ajouter" id="add_intervention" onclick="alert(intSelectValue);"/>

---

Résultat : au clic sur le bouton, l'alert JS m'indique "Sélectionner un type d'intervention".

Et là, je ne vois pas ce qui cloche...


Merci pour votre aide !

wiltoma

A priori, la valeur intSelectValue est initialisé au démarrage de ta page et ne dois pas être mise à jour lors de la sélection d'un élément ....
Appelle directement ta méthode dans le onclick de ton bouton

Quel est l’intérêt de la variable select_intervention qui n'est pas utilisé ?

Ça devrait mieux fonctionné comme ça :

Code:

---

1 2 3 4

function getSelectValue() { var intSelect = document.getElementById('monSelect'); return intSelect.options[intSelect.selectedIndex].text; }

---

Code:

---

<img src="ajouter.png" alt="Bouton ajouter" id="add_intervention" onclick="alert(getSelectValue());"/>

---

Salut,

Merci pour ton aide, tout marche parfaitement à présent. J'ai du mal à faire le lien entre les tutoriels que j'ai lu en détail et la mise en pratique... Les coups de pouce des forums sont précieux, du coup !

Maintenant que je peux récupérer la valeur de l'élément sélectionné dans la liste, je souhaiterais copier cet élément dans une deuxième liste, toujours au clic sur le bouton... Je mets en pièce jointe un aperçu de mon formulaire pour une meilleure compréhension de la situation.

Je pense qu'il faut développer la fonction existante pour qu'elle :

1. Stocke la valeur sélectionnée dans une variable,
2. Ajoute cette valeur dans la deuxième liste déroulante

Puis associer via un onclick sur le bouton cette fonction. Est-ce la bonne logique ou ai-je oublié des étapes ? Voici où j'en suis dans mon code mais ça ne donne rien pour le moment...

Code:

---

1 2 3 4 5 6 7 8

function copyValue() {   var intSelect = document.getElementById('select_intervention'); //1ère liste déroulante ayant pour id 'select_intervention' var intSelectValue = intSelect.options[intSelect.selectedIndex].value; // Récupération de la valeur de l'élément sélectionné   var intAjout = document.getElementById('resu_intervention'); // 2e liste déroulante ayant pour id 'resu_intervention' intAjout.appendChild(intSelectValue); }

---

Merci d'avance pour vos conseils !

Thomas

Bonjour,

Code:

---

1 2 3 4 5 6

var selectedOption = intSelect.options[intSelect.selectedIndex]; var intSelectValue = selectedOption.value; // Récupération de la valeur de l'élément sélectionné   var intAjout = document.getElementById('resu_intervention'); // 2e liste déroulante ayant pour id 'resu_intervention' intAjout.appendChild(selectedOption);

---

A+.

Salut,

Merci pour ta réponse mais je ne vois pas ce qui change par rapport à ma version... Tu mets le tout dans une fonction j'imagine ? Si ça vient s'insérer dans mon code, peux-tu me dire où exactement ?

Je ne comprends pas pourquoi tu mets selectedOption et non intSelectValue en paramètre de appenChild...

Si tu peux juste m'éclairer un peu sur ta proposition...

Merci encore !

Thomas

selectedOption c'est l'option sélectionnée et c'est ça que tu dois ajouter dans l'autre select, mais pas sa valeur.

Code:

---

intAjout.appendChild(selectedOption.cloneNode(true));

---

A+.

OK, compris. Je récapitule :

En JS :

Code:

---

1 2 3 4 5 6 7

function copyValue() {   var intSelect = document.getElementById('select_intervention'); //1ère liste déroulante ayant pour id 'select_intervention' var selectedOption = intSelect.options[intSelect.selectedIndex];   var intAjout = document.getElementById('resu_intervention'); // 2e liste déroulante ayant pour id 'resu_intervention' intAjout.appendChild(selectedOption );}

---

En HTML :

Code:

---

<img src="images/ajouter_20px.png" alt="Bouton ajouter" id="add_intervention" onclick="copyValue();"/>

---

...et il ne se passe absolument rien. Tu vois d'où ça pourrait venir ?

Thomas

J'ai mis une démo ici : http://jsfiddle.net/wiltomap/Ah6zr/ !

Si ça peut aide à échanger...

Merci !!

Thomas

Pose ton code html ici et javascript ici.

...et voilà !

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<section id="intervention"> <header class="champ">Type(s) d'intervention</header> <article class="selectinfo">   <select name="resu_intervention" id="resu_intervention" class="resulist" size="3"></select>   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHWbr62_opTTa0Q_EoVoQDnuQ-CHTinde-nOKTsMe-O--mO0lrOQ" alt="Bouton ajouter" id="add_intervention" onclick="copyValue();"/>   <select name="select_intervention" id="select_intervention" class="selectlist"> <option selected disabled>Sélectionner un type d'intervention</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <!-- <?php echo listInterv(); ?> Alimentation de la liste avec BD --> </select> </article> </section>

---

Ton code a l'air correcte,

avec

Code:

---

intAjout.appendChild(selectedOption );

---

tu déplaces l'option du premier select vers le second, mais avec

Code:

---

intAjout.appendChild(selectedOption.cloneNode(true));

---

tu faits une copie de l'option du premier select et ajoute la copie sur le second select.
Tu as un message d'erreur?

A+.

Salut,

J'ai trouvé avec ce code, en utilisant la fonction option() qui permet de créer une balise <option> en Javascript. Par contre, je n'ai rien trouvé sur les paramètres booléens... Ils permettent apparemment d'activer une sélection par défaut de l'élément en question.

Code:

---

1 2 3 4 5 6 7 8

function copyValue() {   var intSelect = document.getElementById('select_intervention'); var selectedOption = intSelect.options[intSelect.selectedIndex];   var intAjout = document.getElementById('resu_intervention'); intAjout.options[intAjout.length] = new Option(selectedOption.text,selectedOption.value, false, false); }

---

Merci pour l'aide apportée !

Thomas

Le premier booléen c'est pour l'attribut defaultSelected, et le second c'est selected.