Discussion :

[Thomas Williamson]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[royto]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Thomas Williamson]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[andry.aime]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+.

[Thomas Williamson]

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

[andry.aime]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A+.

[Thomas Williamson]

OK, compris. Je récapitule :

En JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[Thomas Williamson]

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

Si ça peut aide à échanger...

Merci !!

Thomas

[andry.aime]

Pose ton code html ici et javascript ici.

[Thomas Williamson]

...et voilà !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[andry.aime]

Ton code a l'air correcte,

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

intAjout.appendChild(selectedOption );

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+.

[Thomas Williamson]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[andry.aime]

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