CODEWITHSUNDEEP
javascriptjquerydrop-down-menuhtml-select
Codewerks
Codewerks

Reputation: 5974

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

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:

Upvotes: 10

Views: 47235

Answers (3)

Shinhan
Shinhan

Reputation: 2830

For stuff like this, I use texotela's select box plugin with its simple ajaxAddOption function.

Upvotes: 4

Jim
Jim

Reputation: 73936

$("#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].

Upvotes: 15

John Sheehan
John Sheehan

Reputation: 78124

By default, jQuery selectors return the jQuery object. Add this to get the DOM element returned:

 var dropdownList = $("#requestTypes")[0];

Upvotes: 9

Related Questions