jQuery - how to implement live() on combobox?

Question

hello,

i have combobox (in fact, several of them), with elements that are added dynamicly.

using jQuery, i don't know how to implement function that will return id of item i selected in combo...

i know that it have to be something using .live(), something like

$(".foo").live("change", function() {
do something;
});

... but i don't know how to implement it here.

tnx in adv!

Answer 1

Use the :selected selector on child elements of the select element (a.k.a. options)

$(".foo").live("change").function(){ 
    var val = $(".foo").find(":selected").val();
    // pass val to some other method for work
});

http://api.jquery.com/selected-selector/

Answer 2

Are you looking for something like this?

$(".foo").live("change", function() {
  $(this).val(); // value of the changed item
});

Answer 3

$(".foo").live("change", function() {
   alert($(this).attr("id")); // Id of the element
});

Answer 4

You can use $(this).val() to find the value of the element that fired the event.

It seems others have beat me to it. Mine is the same as @John and @Daniel.

Here is a jsfiddle to test it out jsfiddle.

One thing to note is that the live does not support the change method in all browsers (such as IE 6 through 8).

One way around this is to use the delegate method, which I have demonstrated here

It would look something like:

$(parentElement).delegate(selector, 'change', function() {
    //do something interesting here
    //$(this).val() still works.
});