Comment obtenir la valeur d'une liste déroulante d'options multiples?

Dire que j'ai cette liste déroulante:Comment obtenir la valeur d'une liste déroulante d'options multiples?

<select name="color" multiple="multiple"> 
<option value="red">Red</option> 
<option value="green">Green</option> 
<option value="blue">Blue</option> 
</select>

Donc, fondamentalement, plus de 1 couleur peut être sélectionnée. Ce que je voudrais, c'est que si un utilisateur sélectionne le rouge, puis clique en vert, je voudrais qu'une fonction soit appelée à chaque fois qui ouvre une boîte de message indiquant la couleur qui a été cliquée le plus récemment.

J'ai essayé ceci:

<option value="red" onclick="alert('red');">Red</option> 
<option value="green" onclick="alert('green');">Green</option> 
<option value="blue" onclick="alert('blue');">Blue</option>

Cela fonctionne dans Firefox et Chrome, mais pas dans IE.

Des idées?

Source

2010-02-14 Click Upvote

Ceci est si compliqué à accomplir que j'ai utilisé une option plus simple d'énumérer les éléments avec une case à cocher à côté d'eux et un bouton sélectionner/désélectionner tout. Cela fonctionne beaucoup mieux et est également pris en charge par IE. Merci à tous pour leurs réponses.

Source

2010-02-15 00:30:39

Jetez un oeil à ma réponse (http://stackoverflow.com/questions/2261518/how-to -get-the-value-of-a-multiple-option-dropdown/2262938 # 2262938) avant d'abandonner votre approche préférée. Ce n'est pas si compliqué une fois que vous divisez l'exigence en plus petits morceaux. – Tim

$("select[name='color']").change(function() { 
    // multipleValues will be an array 
    var multipleValues = $(this).val() || []; 

    // Alert the list of values 
    alert(multipleValues[multipleValues.length - 1]); 
});

Voici un autre exemple: http://api.jquery.com/val/

Source

2010-02-14 15:14:54

Le problème est que plusieurs options peuvent être sélectionnées. Si je choisis le vert, ça marche, alors si on appuie sur CTRL et on clique sur le rouge, ça dit encore vert bien que je le veuille dire rouge –

@Click Upvote - Maintenant il supporte plusieurs valeurs :) –

Mais je ne le veux pas dire à la fois vert et rouge, je veux seulement dire l'option qui vient d'être cliquée. Par exemple, j'ai vert sélectionné, je tiens CTRL et cliquez sur le rouge, je veux dire alors seulement rouge.Si le vert et le rouge sont sélectionnés et que je clique sur bleu, je veux qu'il soit uniquement bleu, et ainsi de suite –

Ce alertera que le dernier (le plus récent) valeur sélectionnée. Appel à l'aide $(this).val() le gestionnaire de changement de select retournera un tableau de toutes vos valeurs sélectionnées:

$(document).ready(function() { 
    $("select[name=color] option").click(function() { 
     alert($(this).val()); 
    }); 
});

Source

2010-02-14 15:15:42 karim79

Attention, vous pouvez sélectionner une option à l'aide du clavier et cela ne déclenchera pas l'événement click :) –

Ne fonctionne pas dans IE –

@Click Upvote - probablement parce que j'utilisais le select 'select' comme sélecteur de classe. Je l'ai édité, essayez-le maintenant si vous le souhaitez. – karim79

Je ne sais pas ce que vous exactement besoin. Ce sera toujours la dernière alerte sélectionnée couleur:

$(function(){ 
    var selected = Array(); 
    $('select[name=color] option').click(function() { 
     if($(this).is(':selected')) { 
      selected.push($(this).val()); 
     } 
     else { 
      for(var i = 0; i < selected.length;i++) { 
       if(selected[i] == $(this).val()) { 
        selected = selected.splice(i,1); 
       } 
      } 
     } 
     alert(selected[selected.length -1]) 
    });   
});

Le tableau est utilisé pour maintenir l'histoire des couleurs choisies.

Pour la dernière cliqués couleur, il est plus simple:

$(function(){ 
    $('select[name=color] option').click(function() { 
     alert($(this).val()); 
    });   
});

Source

2010-02-14 15:29:08

Comme je l'ai dit à karmin79: Attention, vous pouvez sélectionner une option en utilisant le clavier et cela ne déclenchera pas l'événement click :) –

Puisque vous en utilisant jQuery, je vous suggère de jeter un oeil à this superb plugins. Ces plugins vont transformer une liste déroulante de sélection multiple en une liste de cases à cocher, de sorte que l'utilisateur peut sélectionner plusieurs valeurs facilement. Pour obtenir les valeurs, je suggère que vous utilisiez fieldValue méthodes jQuery form plugins. C'est un moyen robuste d'obtenir de la valeur à partir de n'importe quel type d'élément de formulaire. A côté, vous pouvez utiliser ce plugin pour soumettre votre formulaire via AJAX facilement.

Source

2010-02-14 15:42:44

Le code suivant devrait faire ce que je pense que vous êtes après. Chaque fois qu'un élément est sélectionné, il compare la liste des sélections contre la liste précédente, et fonctionne sur quels éléments ont changé:

<html> 
    <head> 
    <script type="text/javascript"> 
     function getselected(selectobject) { 
     var results = {}; 
     for (var i=0; i<selectobject.options.length; i++) { 
      var option = selectobject.options[i]; 
      var value = option.value; 
      results[value] = option.selected; 
     } 
     return results; 
     } 

     var currentselect = {}; 

     function change() { 
     var selectobject = document.getElementById("colorchooser"); 
     var newselect = getselected(selectobject); 
     for (var k in newselect) { 
      if (currentselect[k] != newselect[k]) { 
      if (newselect[k]) { 
       alert("Option " + k + " selected"); 
      } else { 
       alert("Option " + k + " deselected"); 
      } 
      } 
     } 
     currentselect = newselect; 
     } 
    </script> 
    </head> 
    <body> 
    <select id="colorchooser" 
      name="color" 
      multiple="multiple" 
      onchange='javascript:change();' 
      > 
     <option value="red">Red</option> 
     <option value="green">Green</option> 
     <option value="blue">Blue</option> 
    </select> 
    </body> 
</html>

Il devrait fonctionner aussi bien dans Internet Explorer comme Firefox et al.

Source

2010-02-14 21:45:21 Tim

Comment obtenir la valeur d'une liste déroulante d'options multiples?

Répondre

Questions connexes