Javascript – jQuery create select list options from JSON, not happening as advertised

drop-down-menuhtml-selectjavascriptjquery

How come this doesn't work (operating on an empty select list <select id="requestTypes"></select>

$(function() {

        $.getJSON("/RequestX/GetRequestTypes/", showRequestTypes);

    }
    );


    function showRequestTypes(data, textStatus) {

        $.each(data,
            function() {

                var option = new Option(this.RequestTypeName, this.RequestTypeID);
                // Use Jquery to get select list element
                var dropdownList = $("#requestTypes");

                if ($.browser.msie) {
                    dropdownList.add(option);
                }

                else {

                    dropdownList.add(option, null);

                }
            }
            );

        }

But this does:

  • Replace:

    var dropdownList = $("#requestTypes");

  • With plain old javascript:

    var dropdownList = document.getElementById("requestTypes");

Best Answer

$("#requestTypes") returns a jQuery object that contains all the selected elements. You are attempting to call the add() method of an individual element, but instead you are calling the add() method of the jQuery object, which does something very different.

In order to access the DOM element itself, you need to treat the jQuery object as an array and get the first item out of it, by using $("#requestTypes")[0].

Related Topic