Additionner les valeurs d'un select multiple

**renaud26** · 09/09/2014, 15h49

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 :

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

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 :

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

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.

**SpaceFrog** · 09/09/2014, 16h14

http://jsfiddle.net/Lp3vk288/

**renaud26** · 09/09/2014, 19h16

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 ?

**NoSmoking** · 09/09/2014, 19h49

Bonjour,

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()">.

**renaud26** · 09/09/2014, 20h55

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.

**Bovino** · 10/09/2014, 08h24

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

Sinon

Code :

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

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

quelle horreur !

Code :

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

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

est quand même plus conventionnel (et accessoirement, plus optimisé).

**SpaceFrog** · 10/09/2014, 08h26

Beef le find est il plus optimisé que

Code :

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

 $("#liste :selected")

??

**Bovino** · 10/09/2014, 08h36

Normalement oui, mais ça reste fonction des navigateurs.

**renaud26** · 10/09/2014, 09h41

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 :

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

**Bovino** · 10/09/2014, 09h52

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.

**renaud26** · 10/09/2014, 10h02

Et du coup, pas besoin d'appeler la fonction par un onchange sur le select ?

**renaud26** · 10/09/2014, 10h05

Ok, ça fonctionne nickel, c'est moi qui avais fait une ânerie.

Merci beaucoup à tous, et bonne journée.

**NoSmoking** · 12/09/2014, 15h44

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

Code :

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

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

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

Code :

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

$('#liste').on('change', compte_result_select)

**Bovino** · 12/09/2014, 15h50

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 !

Additionner les valeurs d'un select multiple

jQuery

Discussions similaires

Partager

Partager