select option in a dynamically loaded select box

Question

I have two select boxes:

  <select id="ddlLanguage">
        </select>
        <select id="ddlLanguage2">
            <option value="C#">C#</option>
            <option value="Java">Java</option>
            <option value="PHP">PHP</option>
             <option value="VB.NET">VB.NET</option>
            <option value="JavaScript">JavaScript</option>
            <option value="jQuery">jQuery</option>
        </select>

I have this webmethod to load the first select box

   <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetLanguageList",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#ddlLanguage").empty().append($("<option></option>").val("[-]").html("Please select"));
                    $.each(msg.d, function() {
                        $("#ddlLanguage").append($("<option></option>").val(this['Value']).html(this['Text']));
                    });
                },
                error: function() {
                    alert("An error has occurred during processing your request.");
                }
            });

             $('#ddlLanguage').val('PHP');
        $('#ddlLanguage2').val('PHP');

        });
</script>

And here the webmethod:

[WebMethod()]
    public static ArrayList GetLanguageList()
    {
        ArrayList lstArrLanguage = new ArrayList();
        lstArrLanguage.Add(new ListItem("C#", "C#"));
        lstArrLanguage.Add(new ListItem("Java", "Java"));
        lstArrLanguage.Add(new ListItem("PHP", "PHP"));
        lstArrLanguage.Add(new ListItem("VB.NET", "VB.NET"));
        lstArrLanguage.Add(new ListItem("JavaScript", "JavaScript"));
        lstArrLanguage.Add(new ListItem("jQuery", "jQuery"));
        return lstArrLanguage;
    }

As you can see before document ready finish, I do this:

   $('#ddlLanguage').val('PHP');
            $('#ddlLanguage2').val('PHP');

But, It is only working for the second one, the one which is not loading from webmethod.

Answer 1

The problem here is that val is called before drop down is initialized with new values. Note that ajax by default performs asynchronous requests, which means that right after ajax is not guaranteed to finish its work. In fact it most likely won't! So when you are calling val right after ajax dropdown is still empty, and there is no value to select.

To fix this, either turn ajax in synchronous call with corresponding setting:

$.ajax({
    async: false,
    ...

Or call val in success function, when everything is loaded for sure:

success: function(msg) {
    $("#ddlLanguage").empty().append($("<option></option>").val("[-]").html("Please select"));
    $.each(msg.d, function() {
        $("#ddlLanguage").append($("<option></option>").val(this['Value']).html(this['Text']));
    });

    $('#s2_combo').val('avalue');
},

Second option if a preferred one though.