Come ottenere il valore di un menu a discesa di opzioni multiple?

Dire che ho questa discesa:Come ottenere il valore di un menu a discesa di opzioni multiple?

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

Quindi, in pratica più di 1 colore può essere selezionato. Quello che mi piacerebbe è che se un utente seleziona il rosso, e poi fa clic su verde, vorrei che una funzione venisse chiamata ogni volta che si aprisse una finestra di messaggio che dicesse il colore su cui si era fatto più recentemente clic.

Ho provato questo:

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

Questo funziona in Firefox e Chrome, ma non in IE.

Qualche idea?

fonte

2010-02-14 Click Upvote

Questo è così complicato da realizzare che ho usato una più semplice opzione di elencare gli oggetti con una casella di controllo accanto a loro e selezionare/deselezionare tutto il pulsante. Funziona molto meglio ed è supportato anche da IE. Grazie a tutti per le loro risposte.

fonte

2010-02-15 00:30:39

Dai un'occhiata alla mia risposta (http://stackoverflow.com/questions/2261518/how-to -get-the-value-of-a-multiple-option-dropdown/2262938 # 2262938) prima di abbandonare il tuo approccio preferito. Non è così complicato una volta abbattuto il requisito in pezzi più piccoli. – 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]); 
});

Ecco un altro esempio: http://api.jquery.com/val/

fonte

2010-02-14 15:14:54

Il problema è che è possibile selezionare più opzioni. Se seleziono il verde, funziona, quindi se tieni premuto CTRL e fai clic su rosso, continua a essere verde anche se voglio che venga visualizzato rosso –

@Click Upvote - Ora supporta più valori :) –

Ma non voglio che diciamo sia verde che rosso, voglio solo dire l'opzione che è stata appena cliccata. E.g, ho selezionato il verde, tengo CTRL e clicco sul rosso, voglio che dica solo il rosso.Se ho selezionato sia il verde che il rosso e clicco su blu, voglio dire solo blu, e così via –

Questo avviso solo l'ultimo (più recente) valore selezionato. Chiamando $(this).val() utilizzando il gestore di selezione cambiamento restituisce un array di tutti i valori selezionati:

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

fonte

2010-02-14 15:15:42 karim79

Attenzione che puoi selezionare un'opzione usando la tastiera e non attiverà l'evento click :) –

Non funziona in IE –

@Click Upvote - probabilmente perché stavo usando il 'nome select 'come selettore di classe. L'ho modificato, provalo ora, se vuoi. – karim79

io non sono sicuro di quello che esattamente bisogno. Questo sarà sempre avvertire l'ultima selezionato colore:

$(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]) 
    });   
});

L'array viene utilizzato per mantenere la storia dei colori selezionati.

Per l'ultima cliccato colore, è più semplice:

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

fonte

2010-02-14 15:29:08

Come ho detto a karmin79: fai attenzione che puoi selezionare un'opzione usando la tastiera e non attiverà l'evento click :) –

Dal momento che si utilizza jQuery, vi consiglio di dare un'occhiata a this superb plugins. Questi plugin trasformeranno un elenco a discesa a selezione multipla in un elenco di caselle di controllo, in modo che l'utente possa selezionare più valori con facilità.

Per ottenere i valori, suggerisco di utilizzare i metodi fieldValue da jQuery form plugins. È un modo efficace per ottenere valore da qualsiasi tipo di elemento del modulo. Inoltre, puoi utilizzare questi plugin per inviare facilmente il tuo modulo tramite AJAX.

fonte

2010-02-14 15:42:44

Il seguente codice dovrebbe fare ciò che penso tu stia cercando. Ogni volta che un elemento è selezionato, si confronta l'attuale elenco delle selezioni nei confronti della lista precedente, ed elabora gli elementi che sono cambiati:

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

Si dovrebbe funzionare altrettanto bene in Internet Explorer come Firefox et al.

fonte

2010-02-14 21:45:21 Tim

Come ottenere il valore di un menu a discesa di opzioni multiple?

risposta

Problemi correlati