Question

I have a field that is brought in via an AJAX call:

<select id="selection">
    <option value="foo">bar</option>
    <option value="baz">bat</option>
</select>

I’m trying to use .on() to pass the selected element to a function when the field is changed:

$(document).on("change", "#selection", function(){ doStuff(jQuery(this).filter("option:selected")); });

function doStuff(selection)
{
    alert(selection.text());
}

When the element changes, I only receive a blank alert dialogue. Placing a breakpoint on alert(selection.text() gives me:

selection: e.fn.e.init[0]
    context: HTMLSelectElement
        0: HTMLOptionElement
        1: HTMLOptionElement
    length: 0
    prevObject: e.fn.e.init[1]
    selector: ".filter(option:selected)"
    __proto__: Object[0]

And one of the HTMLOptionElements will have a selected: true value. I just don’t know how to get the text (bar or bat in my example) from the selected element, using .on().

I would normally do $('#selection option:selected').text();, but .on() is playing all sorts of games on me 🙁

Answer 1

Whoa, there.. Why not

$(function() {
  $('#selection').on('change', function() {
    alert($(this).children(':selected').text());
  });
});