Additionner les valeurs d'un select multiple

Version imprimable

Bonjour à tous,

Comme dit dans le titre, je souhaiterais afficher dans un div l'addition des valeurs sélectionnées. Je souhaiterais que si un élément est désélectionné, le résultat soit bien entendu décrémenté.
Côté html :
Code:

1 2 3 4 5 6 7 8 <select name="liste[]" id="liste" multiple="multiple" onchange="compte_result_select()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select <div id="result"></div>
Côté jquery :
Code:

1 2 3 4 5 6 7 8 function compte_result_select(){ var nb = 0; $("select[id='liste'] option:selected").each(function() { nb += $(this).val(); }); $("#result").html(nb); }
Mais rien ne s'affiche...
Merci de votre aide.

09/09/2014, 16h14
SpaceFrog

http://jsfiddle.net/Lp3vk288/
09/09/2014, 19h16
renaud26

Bonjour et merci de ta réponse, c'est carrément cool !
Mais je fais la fine bouche : on est obligé de passer par un bouton ? Ca peut pas le faire simplement par des sélections dans le multiple ?
09/09/2014, 19h49
NoSmoking

Bonjour,

Citation:

Envoyé par renaud26

Ca peut pas le faire simplement par des sélections dans le multiple ?

tu as essayé quoi au juste attendu qu'il me semble que tu connais onchange="compte_result_select()">.
09/09/2014, 20h55
renaud26

Citation:

tu as essayé quoi au juste attendu qu'il me semble que tu connais onchange="compte_result_select()">.

Oui, j'ai essayé d'attacher la fonction au select : évidemment. Il m'est important de comprendre.
Mais cela ne fonctionne pas.
10/09/2014, 08h24
Bovino

http://jsfiddle.net/Lp3vk288/1/

Sinon

Code:

$("select[id='liste'] option:selected")

quelle horreur ! :cry:

Code:

$("#liste").find(":selected")

est quand même plus conventionnel (et accessoirement, plus optimisé).
10/09/2014, 08h26
SpaceFrog

Beef le find est il plus optimisé que

Code:

$("#liste :selected")

??
10/09/2014, 08h36
Bovino

Normalement oui, mais ça reste fonction des navigateurs.

Merci, Didier, de ton intervention.
Mais dans ton exemple, tu mets un on.click sur le bouton...et pas de bouton.
Voici mon code...qui ne fonctionne pas. Même pas le alert sur la variable nb.

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
 
<head>
<script type="text/javascript">
$(function () {
 
   function compte_result_select(){
 
        var nb = 0;
        $("#liste :selected").each(function () {
            nb += +$(this).val();
	    alert(nb);
             });
        $("#result").html(nb);
    }
 
})
 
 
</head>
<body>
<select name="liste[]" id="liste" multiple="multiple" onchange="compte_result_select()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="result"></div>
</body>

10/09/2014, 09h52
Bovino

Citation:

tu mets un on.click sur le bouton...et pas de bouton.

Oui, j'ai viré le bouton qui ne sert plus à rien mais j'ai oublier de supprimer le gestionnaire d'événement sur ce bouton.
Mais j'ai surtout ajouté un gestionnaire au clic sur les options qui permet de faire le boulot.
10/09/2014, 10h02
renaud26

Et du coup, pas besoin d'appeler la fonction par un onchange sur le select ?
10/09/2014, 10h05
renaud26

Ok, ça fonctionne nickel, c'est moi qui avais fait une ânerie. :oops:
Merci beaucoup à tous, et bonne journée.
12/09/2014, 15h44
NoSmoking

@Bovino :
y a t-il un avantage, coté performance ou autre..., à mettre

Code:

$('#liste option').on('click', compte_result_select)

plutôt que de n'avoir à gérer qu'un seul événement onchange?

Code:

$('#liste').on('change', compte_result_select)
12/09/2014, 15h50
Bovino

Non, en fait, c'est même mieux d'utiliser l'événement change.
Je ne l'avais pas fait parce que je m'étais un peu emmêlé les pinceaux dans mes tests et ça ne marchait pas, mais uniquement parce j'avais laissé le calcul sur le clic du bouton et que le onchange ne déclenche pas le clic sur le bouton ! :aie: