Question

ok, i have a select dropdown and beneeath it is a text field. If I poplate a static text field and onclick of its option i want to fill in the text field with the values selected in select dropdown. It works fine.
here is a

DEMO

Now I am pulling the select dropdown options ffrom the xml and when I again use it to update my text field on click of its option, it doesn’t work;

Here is a DEMO

i know that in the second demo, the xml is not at the correct place, but I have tested this on my local machine and it doesn’t work.

Any help is appreciated.
Thanks

Answer 1

I assume you’re actually using multiple selects. If so, just bind the handler to the select element instead:

$(".generalTemplate").click(function() {
    var su = $(this).find(':selected').text();
    $("#sub").val(su);
});

This finds the selected element when clicked, and doesn’t need to be bound to the individual option elements after they’re inserted.

If you’re not using a multiple, you’d want to bind to the change event.

$(".generalTemplate").change(function() {
    var selected = $(this).find(':selected');
    if( selected.index() > 0 ) {
        var su = selected.text();
        $("#sub").val(su);
    }
});

Ultimately, what was happening was that the asynchronous AJAX call was executing its callback function after you ran the code to bind the handlers.

In other words, code doesn’t wait for the AJAX response to arrive before it executes. By binding to the select itself, you know it is already available in the document, so there’s no synchronization issues.