JQuery: Sélectionnez les éléments modifiés suivis mais pas leurs valeurs!

Question

Je viens de recevoir une réponse à une question et suis tombé dans un autre piège!

J'ai un formulaire qui est dans un lightbox et je veux suivre chaque changement dans les éléments de sélection. Quand ils changent, je veux obtenir la valeur de chacun des éléments sélectionnés. J'ai essayé de faire ce qui suit:

$('select.htt, select.hst').live('change', function() { 
    var channels = parseInt($('select.hst').val(), 10) * parseInt($('select.htt').val(), 10); 
    alert($('select.hst').val() + ' and ' + $('select.htt').val());   
    $('span.yellow2').html(channels); 
}); 

Cependant, les valeurs sont toujours les mêmes à savoir la première option dans chaque liste déroulante, même si il y a d'autres options sélectionnées. Je suppose que quelqu'un a déjà expliqué. La lightbox que j'utilise prend une copie de ces éléments et les modifie et JQuery ne peut pas voir cela, mais on m'a dit de référencer les éléments via des classes qui ont fonctionné mais seulement jusqu'à maintenant.

Que puis-je essayer et quel est le problème?

J'apprécie vraiment toute aide.

Merci à tous

Answer 1

La raison de votre problème est que vous avez deux (ou plusieurs) copies de vos éléments select. Lorsque vous appelez $('select.hst').val(), jQuery renvoie la valeur du premier élément select avec la classe hst qu'il trouve, ce qui n'est pas la valeur souhaitée.

Vous devrez trouver un moyen d'étendre vos sélecteurs jQuery à uniquement les éléments à l'intérieur de la visionneuse visible div. Si la div lightbox possède un identifiant ou un autre attribut unique, utilisez-le pour définir vos éléments form/select/span.

Si la visionneuse div id a "lightbox":

<div id="lightbox"> 
... 
</div> 

Utilisez les sélecteurs de la forme:

$('#lightbox select.hst').val(); 

Answer 2

Deux choses (essayez le d'abord, puis ensuite le premier + seconde):

Vous choisissez select, pas l'option, alors essayez de choisir toutes les options qui sont sélectionnées

$('select.hst option:selected').val() 

Ensuite, vous choisissez val() qui renverra l'attribut de valeur de l'option. Juste au cas où vous voulez le texte à la place, choisissez text().