JQuery: Select Elements changes tracked but not their values!

Question

Hello all,

I have just got a questioned answered and have fallen into another trap!

I have a form which is in a lightbox and I want to track every change in the select elements. When they change I want to get the value of each of the select elements. I have tried to do the following:

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

However, the values are always the same i.e. the first option in each drop down box even though there are other options selected. I am guessing like somebody has explained before. The lightbox I am using takes a copy of these elements and makes changes to them and JQuery can not see this, but I have been told to reference the elements via classes which has worked but only up to this point.

What else can I try and what is the problem?

I really appreciate any help.

Thanks all

Answer 1

Two things (try the first then then the first + second):

You are choosing select, not option, so try choosing all options that are selected

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

Second, you are choosing val() which will return the value attribute of the option. Just in case you want the text instead, choose text().

Answer 2

The reason for your problem is that you have two (or more) copies of your select elements. When you call $('select.hst').val(), jQuery returns the value of the first select element with class hst that it finds, which is not the value you want.

You will have to find a way to scope your jQuery selectors to only the elements inside the visible lightbox div. If the lightbox div has an id or some other unique attribute, use that to scope your form/select/span elements.

If the lightbox div has id "lightbox":

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

Use selectors of the form:

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