Obtenir le « nouveau » texte de l'option choisie dans plusieurs liste de sélection

Question

J'ai une liste de sélection HTML, ce qui peut avoir plusieurs Selects:

<select id="mySelect" name="myList" multiple="multiple" size="3"> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
    <option value="3">Third</option> ` 
    <option value="4">Fourth</option> 
    ... 
</select> 

Je veux obtenir un texte d'une option de chaque fois que je l'ai choisi. J'utilise jQuery pour ce faire:

$('#mySelect').change(function() { 
    alert($('#mySelect option:selected').text()); 
}); 

semble assez simple, si la liste de sélection a déjà quelques options sélectionnées - il retournera trop leur texte. Par exemple, si j'avais déjà sélectionné l'option "Deuxième", après avoir choisi "Quatrième", l'alerte m'apporterait ceci - "SecondFourth". Donc, y a-t-il un moyen simple et court avec jQuery d'obtenir seulement le texte de l'option sélectionnée "actuelle" ou dois-je jouer avec des chaînes et filtrer le nouveau texte?

Answer 1

Vous pourriez faire quelque chose comme ça, en gardant l'ancien tableau de valeur et le contrôle qui nouveau n'est pas là-dedans, comme ceci:

var val; 
$('#mySelect').change(function() { 
var newVal = $(this).val(); 
for(var i=0; i<newVal.length; i++) { 
    if($.inArray(newVal[i], val) == -1) 
     alert($(this).find('option[value="' + newVal[i] + '"]').text()); 
} 
val = newVal; 
}); ​ 

Give it a try here, Lorsque vous appelez .val() sur un <select multiple> il retourne un tableau des valeurs de ses éléments <option> sélectionnés. Nous stockons simplement cela, et lorsque la sélection change, en passant par les nouvelles valeurs, si la nouvelle valeur se trouvait dans l'ancien tableau de valeur ($.inArray(val, arr) == -1 s'il n'est pas trouvé), alors c'est la nouvelle valeur. Après cela, nous utilisons simplement un attribute-equals selector pour saisir l'élément et obtenir son .text().

Si le mai value="" contient des guillemets ou d'autres caractères spéciaux qui pourraient interférer avec le sélecteur, utilisez .filter() à la place, comme ceci:

$(this).children().filter(function() { 
    return this.value == newVal[i]; 
}).text()); 

Answer 2

var val = '' 
$('#mySelect').change(function() { 
    newVal = $('#mySelect option:selected').text(); 
    val += newVal; 
    alert(val); # you need this. 
    val = newVal; 
}); 

ou nous allons jouer un peu plus

val = ''; 
$('#id_timezone') 
    .focus(
    function(){ 
     val = $('#id_timezone option:selected').text(); 
    }) 
    .change(
    function(){ 
     alert(val+$('#id_timezone option:selected').text()) 
    }); 

À votre santé.

Answer 3

Définir un onClick sur l'option au lieu de la sélection:

$('#mySelect option').click(function() { 
    if ($(this).attr('selected')) { 
     alert($(this).val()); 
    } 
});