populate dropdown via ajax and automatically select a value

Question

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 .net.

Thanks!

your part two executing before ajax success so put this after your each in ajax success — syms
– 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
– 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 completed before the ajax script which led to problems. I should've paid more attention to 'async: true' in the ajax script... — Jefferson
– Jefferson, Commented May 5, 2015 at 5:14

Guruprasad J Rao · Accepted Answer · 2015-05-05 04:56:31Z

1

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 complete url as your ajax url since when you host the site this will change and http://localhost:8007/ will no longer be available!

edited May 5, 2015 at 4:56

answered May 5, 2015 at 4:49

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jefferson Over a year ago

accepting this as answer as it works as well. thanks for the warning on the absolute path usage.... didn't know how to use relative paths in ajax url until I came across this topic: stackoverflow.com/a/26590904/2861121

Guruprasad J Rao · Accepted Answer · 2015-05-05 04:50:11Z

1

You can write following code in Ajax Success :

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

Thanks

edited May 5, 2015 at 4:50

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

answered May 5, 2015 at 4:48

Pratap Patil

2341 silver badge4 bronze badges

Collectives™ on Stack Overflow

populate dropdown via ajax and automatically select a value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related