Question

Using jquery 1.7.1, I’m using json to populate the dropdown. The code works just great and is is stored in a function but called upon document.ready(). I hope someone finds it useful, BUT:

proxy.invoke("fetchCHAA", {},
        function(result) {

            if (result == null) {
                alert("Possible error in fetching list of CHAAs");
                return;
            }
            else {

                var optionsValues = '<select>';
                optionsValues += '<option value=""></option>';
                $.each(result, function() {
                    optionsValues += '<option value="' + this.chaa_id + '">' + this.chaa_name + '</option>';
                });
                optionsValues += '</select>';
                var options = $('#optionsChaa');

                options.replaceWith(optionsValues);


            }


        }, onPageError);

As I said, the problem lies with .change event or even attempting to get the value of the selected item. For example, we know that

var id = $("#optionsChaa").val();
// should bring back the chaa_id

Or:

var text = $("#optionsChaa").text();
// should bring back the chaa name

The problem is that bringing back the ID or TEXT through .val() is always undefined. I’ve noticed that others seem to have the same problem yet seemingly unable to address it.

I even added the change event to the optionsValue object hoping that it will work after the DOM is loaded but that does not seem to work as well.

I don’t want to hard code the list of options on the page but it looks like I might have to.

Answer 1

Try changing var optionsValues = '<select>'; to var optionsValues = '<select id="optionsChaa">';

The ID is getting lost I think.

edit @David M beat me to it, that’s the answer.