Discussion :

[jean66]

Bonjour à tous!

Je bloque depuis pas mal de temps sur un problème lié à la récupération des valeurs en utilisant le JS.
Dans une liste de choix à sélectionner, je récupère qu'une valeur, même si plusieurs sont sélectionnés... Je souhaiterais récupérer toutes les valeurs sélectionnées (<li id="valeur">Choix<li>). Pouvez-vous m'aider?

Le code :

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
$(document).ready(function() {
  $(function(){
    $(‘#bouton ul li').click(function(){
      window.choice = this.id;
      //$('bouton ul li').removeClass('selected');
      $(this).addClass('selected');
      }); 
 
      $('#bouton ul li').mouseover(function(){
      $(this).addClass('over');
      });
 
      $('#bouton ul li').mouseout(function(){
      $(this).removeClass('over');
    });
 
  });
}); 
 
  function setChoice(){
    if(!$(‘#bouton ul li.selected').click()){
      $(‘#result').val(1);
      }else{
        // set the value of the hidden input field
        $(‘#result').val(window.choice);
      }
  }

Je vous remercie par avance!

[SylvainPV]

Salut,

Vraisemblablement, vu la ligne de code commentée ligne 5, il s'agit d'un code prévu pour un seul élément sélectionné qui a été maladroitement modifié pour essayer de gérer une sélection multiple. Ici tu utilises une seule variable globale (window.choice) et un seul champ caché pour stocker l'information du champ sélectionné, donc en toute logique c'est le dernier élément cliqué qui est enregistré dans le champ caché du formulaire.

Question bête, pourquoi ne pas se servir de l'élément standard <select multiple> ?

[jean66]

Merci pour cette réponse. Effectivement, à la base, c'était prévu pour ne garder qu'une seule valeur... Est-il possible donc de récupérer toutes les valeurs qui sont sélectionnées (à la place de window.choice)?
Oui, c'est certain qu'un simple "select multiple" serait bien plus simple mais pour des raisons de "présentation", c'est cette solution qui a été choisie...

[SylvainPV]

Voilà en jQuery comment mettre la liste des ID sélectionnés dans ton champ caché, séparés par une virgule :

Code :

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

1
2
3
function setChoice(){
    $("#result").val($("#bouton ul li.selected").map(function(i,li){ return li.id; }).join(","));
  }

Plus besoin de window.choice avec ça

[jean66]

Bonsoir,

Merci pour votre réponse.
J'ai essayé, mais je n'arrive pas à récupérer les valeurs sélectionnés...
Voici le nouveau code et juste en dessous l'ancien :

Code html :

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

1
2
3
4
5
6
7
8
9
<input name="result" id="result" type="hidden" />
<div id="bouton">
  <ul>
    <li id="Choice 1">Choice 1</li>
    <li id="Choice 2">Choice 2</li>
    <li id="Choice 3">Choice 3</li>
    <li id="Choice 4">Choice 4</li>
    </ul>
</div>

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
$(document).ready(function() {
  $(function(){
    $(‘#bouton ul li').click(function(){
      window.choice = this.id; // A supprimer ou à remplacer?
      //$('bouton ul li').removeClass('selected');
      $(this).addClass('selected');
      }); 
 
      $('#bouton ul li').mouseover(function(){
      $(this).addClass('over');
      });
 
      $('#bouton ul li').mouseout(function(){
      $(this).removeClass('over');
    });
 
  });
}); 
 
function setChoice(){
    $("#result").val($("#bouton ul li.selected").map(function(i,li){ return li.id; }).join(","));
  }
 
  }

L'ancien code :

Code html :

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

1
2
3
4
5
6
7
8
9
<input name="result" id="result" type="hidden" />
<div id="bouton">
  <ul>
    <li id="Choice 1">Choice 1</li>
    <li id="Choice 2">Choice 2</li>
    <li id="Choice 3">Choice 3</li>
    <li id="Choice 4">Choice 4</li>
    </ul>
</div>

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
28
29
$(document).ready(function() {
  $(function(){
    $(‘#bouton ul li').click(function(){
      window.choice = this.id; 
      //$('bouton ul li').removeClass('selected');
      $(this).addClass('selected');
      }); 
 
      $('#bouton ul li').mouseover(function(){
      $(this).addClass('over');
      });
 
      $('#bouton ul li').mouseout(function(){
      $(this).removeClass('over');
    });
 
  });
}); 
 
  function setChoice(){
    if(!$(‘#bouton ul li.selected').click()){
      $(‘#result').val(1);
      }else{
        // set the value of the hidden input field
        $(‘#result').val(window.choice);
      }
  }
 
</script>

[danielhagnoul]

Je ne comprends absolument rien au code HTML. Ce n'est pas un"select multiple", c'est quoi ?