Question

I’m populating my select list/drop on demand and for some reason the list disappears on MouseUp.

Code to populate the list:

<select id="UserList" name="UserList" onclick="getCountries()">.....</select> 
.
.
.
        function getCountries() {
        $.post("/Users/GetUsersJson/", { id: userId },
        function (result) {

            $.each(result, function (item) {
                $("#UserList").append(
                $("<option></option>").text(result[item].UserName).val(result[item].Id)
                );
            });

        }, "json");
    }

When I click on the list it gets populated just fine however when I release the mouse button it closes without letting me select anything on the list.
I can’t figure out what’s happening.

Any clues ?

Answer 1

I can’t see anything that would cause your drop down list to disappear so I’d suggest putting in some alert boxes so you can determine precisely which line triggers the issue. That said, you should be aware that this is possible with the jquery each method.

function getCountries() {
    $.post("/Users/GetUsersJson/", { id: userId },
    function (result) {

        $.each(result, function (index, item) {
            $("#UserList").append(
            $("<option></option>").text(item.UserName).val(item.Id)
            );
        });

    }, "json");
}

Makes your code a little bit easier to read.