Not populating dropdownlist inside $.each

I have such code:

var options = $("#drop");
$.getJSON("/services.asmx/GetResults", params, function (result) {

        $.each(result, function () {
            //alert(this.Name) works!    
            options.append($("<option />").text("test"));  
        });

    });
//options.append($("<option />").text("test"));  Works!

and it's not appending my dropdownlist. If I move that line out of getJSON method, it works. I debugged and all data returned (result) is correct, there are no errors. Originally I 开发者_JAVA百科want to add this.Name instead of "test", but even simple string does not append.. What's wrong here?

UPDATE: I just figured out, that I am using jquery CHOSEN plugin, which converts option tags to li. I bet that's a problem. I still didn't solve the issue and wonder why it works only outside service call, but not inside.. Thank you for your answers!!!

I tested your code and it works for me. The only thing I could think of is that you selector for the dropdown is incorrect. You say:

var options = $("#drop");

But I notice that you are calling an ASMX Web service. Is your dropdown list an ASP.NET DropDownList? If it's an ASP.NET DropDownList, your markup might look something like:

<asp:DropDownList runat="server" ID="drop">

When this gets rendered on the client-side, the ID is no longer drop. It would be more like *ParentControlID_drop*.

Double-check your selector.

Are you getting this problem only in IE?

After the loop alert(options.html()) you will probably find that the html looks correct but it isnt updated on the page. there are some DOM caching issues in some browsers which cache DOM changes until a property is read that requires a render.

I have fixed this before by hiding and showing the dropdown after populating it. It sounds crazy, but it is worth a try.

edit: might have been a width change rather than a hide/show

The issue was with a jquery Chosen plugin, which grabs a standard dropdownlist and turns to and