Récupérer multiples valeurs

Version imprimable

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:

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!

05/02/2015, 02h11
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> ?
05/02/2015, 02h18
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...
05/02/2015, 11h10
SylvainPV
Voilà en jQuery comment mettre la liste des ID sélectionnés dans ton champ caché, séparés par une virgule :
Code:

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

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:

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:

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:

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:

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>

06/02/2015, 01h11
danielhagnoul

:calim2:

Je ne comprends absolument rien au code HTML. Ce n'est pas un"select multiple", c'est quoi ?
06/02/2015, 01h21
jean66

Bonsoir!

Et bien on récupère la valeur des ids sélectionnés (enfin pour le moment de l'id) au moment du submit. (avec une règle de type onclick="setChoice()" ).
Pourquoi pas un select multiple, c'est uniquement pour des raisons graphiques.

Code:

.selected { color: lightgreen;}

Code:

1
2
3
4
5
6
7
8
9
<input name="result" id="result" value="">
<div>
    <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:

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
30
31
32
33
34
$( function(){ // forme abrégée de $(document).ready(function(
 
    var jObjChoices = $( "[id^='Choice ']" );
 
    jObjChoices.on( "click", function( ){
 
        if ( $( this ).hasClass( "selected" ) ){
            $( this ).removeClass( "selected" );
        } else {
            $( this ).addClass( "selected" );
        }
    });
 
    // Exemple, on laisse 10s pour sélectionner des éléments
 
    // Dans votre code remplacer le setTimeout par une fonction
    // qui sera appelée selon besoin pour prendre la valeur de $( "#result" ).val()
 
    setTimeout( function(){
 
        var tab = [];
 
        jObjChoices.filter( ".selected" ).each( function( i, item ){
            tab.push( item.id );
        });
 
        $( "#result" ).val( tab.join( ", " ) );
 
        // debug, console, touche F12
        console.log( $( "#result" ).val() );
 
    }, 10000 ); // après 10s
 
});

06/02/2015, 09h39
SylvainPV

Il y a une accolade en trop dans ton code. La première chose à faire aurait été de valider la syntaxe, par ton éditeur ou en regardant la console du navigateur.

@SylvainPV : Je suppose que tu parles de son code, car le mien a été testé. J'ai préféré utiliser each(), plus facilement compréhensible que map().

Il y a un problème avec ton code, manque get(). Pas testé peut-être ? ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 var tab = jObjChoices.filter( ".selected" ).map( function( i,li ){ return li.id; }); //.join(","); // Uncaught TypeError: undefined is not a function console.log( tab ); // ["Choice 2", "Choice 4", prevObject: n.fn.init[2], context: document, jquery: "2.1.3", constructor: function, selector: ""…] var str = jObjChoices.filter( ".selected" ).map( function( i,li ){ return li.id; }).get().join(); console.log( str ); // Choice 1,Choice 3,Choice 4

06/02/2015, 16h16
jean66

Bonjour à tous,

Je vous remercie pour toutes vos réponses. Le problème est désormais résolu.

Bonne Journée