I'm kinda new to javascript and ajax.

The page that I'm building will ask user to select from a list. Upon selection, a dropdown will be populated from database, and a default value of that dropdown will be automatically selected.

So far I've been able to populate the dropdown OR automatically select a value. But I can't do them both in succession.

Here's the Javascript snippet that gets called upon selection of an item from a a list:

function onSelectProduct(data, index) {
//part 1: auto populate dropdown
    $.ajax({
        type: "POST",
        async: true,
        url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
        data: "{productID: " + data.ID + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $("#Details_" + index + "_ConversionID").empty();
            $.each(result.d, function (key, val) {
                var option = document.createElement('option');
                option.text = val.Name;
                option.value = val.ID;
                $("#Details_" + index + "_ConversionID").append(option);
            });
        }
    });
//part 2: select one of the values
    var ddl = document.getElementById("Details_" + index + "_ConversionID");
    var opts = ddl.options.length;
    for (var i = 0; i < opts; i++) {
        if (ddl.options[i].value == data.StockUnitID){
            ddl.options[i].selected = true;
            break;
        }
    }
}

I used $("#Details_" + index + "_ConversionID").empty(); because I started with all possible options in the dropdown.

If I started with an empty dropdown, ddl.options.length will return 0 for some reason.

From my understanding, the ajax script that I wrote doesn't really change the properties of the dropdown box (ddl.options.length returns either 0 or the full list with or without the ajax operation). If that's true, then what's the right way to populate that dropdown?

Btw I'm using cshtml and .

Thanks!

I'm kinda new to javascript and ajax.

The page that I'm building will ask user to select from a list. Upon selection, a dropdown will be populated from database, and a default value of that dropdown will be automatically selected.

So far I've been able to populate the dropdown OR automatically select a value. But I can't do them both in succession.

Here's the Javascript snippet that gets called upon selection of an item from a a list:

function onSelectProduct(data, index) {
//part 1: auto populate dropdown
    $.ajax({
        type: "POST",
        async: true,
        url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
        data: "{productID: " + data.ID + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $("#Details_" + index + "_ConversionID").empty();
            $.each(result.d, function (key, val) {
                var option = document.createElement('option');
                option.text = val.Name;
                option.value = val.ID;
                $("#Details_" + index + "_ConversionID").append(option);
            });
        }
    });
//part 2: select one of the values
    var ddl = document.getElementById("Details_" + index + "_ConversionID");
    var opts = ddl.options.length;
    for (var i = 0; i < opts; i++) {
        if (ddl.options[i].value == data.StockUnitID){
            ddl.options[i].selected = true;
            break;
        }
    }
}

I used $("#Details_" + index + "_ConversionID").empty(); because I started with all possible options in the dropdown.

If I started with an empty dropdown, ddl.options.length will return 0 for some reason.

From my understanding, the ajax script that I wrote doesn't really change the properties of the dropdown box (ddl.options.length returns either 0 or the full list with or without the ajax operation). If that's true, then what's the right way to populate that dropdown?

Btw I'm using cshtml and .

Thanks!

• javascript
• jquery
• ajax
• razor

• 2 Why not write the part 2 in ajax success? – Shaunak D Commented May 5, 2015 at 4:43
• your part two executing before ajax success so put this after your each in ajax success – syms Commented May 5, 2015 at 4:44
• First try with writing part 2 in ajax success block .. see if it works or not.. – Brijesh Bhatt Commented May 5, 2015 at 4:47
• Thank you everyone! Writing part 2 in the success block made it work. And you're right, part 2 pleted before the ajax script which led to problems. I should've paid more attention to 'async: true' in the ajax script... – Jefferson Commented May 5, 2015 at 5:14

2 Answers 2

Well you can try using $.when and .done as below:

It will execute your code once the options have been set

$.ajax({
        type: "POST",
        async: true,
        url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
        data: "{productID: " + data.ID + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            $("#Details_" + index + "_ConversionID").empty();
            $.when(
            $.each(result.d, function (key, val) {
                var option = document.createElement('option');
                option.text = val.Name;
                option.value = val.ID;
                $("#Details_" + index + "_ConversionID").append(option);
            })).done(function(){
                //part 2: select one of the values
                var ddl = document.getElementById("Details_" + index +"_ConversionID");
                var opts = ddl.options.length;
                for (var i = 0; i < opts; i++) {
                       if (ddl.options[i].value == data.StockUnitID){
                            ddl.options[i].selected = true;
                            break;
                       }
                } 
            });
        }
 });

I would also like to suggest one thing! Please do not use plete url as your ajax url since when you host the site this will change and http://localhost:8007/ will no longer be available!

You can write following code in Ajax Success :

$("#Details_"+index +"_ConversionID").val('value you want to select');

Thanks