CODEWITHSUNDEEP
javascriptjqueryajaxrazor
Jefferson
Jefferson

Reputation: 399

populate dropdown via ajax and automatically select a value

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!

Upvotes: 1

Views: 11655

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

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!

Upvotes: 1

Pratap Patil
Pratap Patil

Reputation: 234

You can write following code in Ajax Success :

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

Thanks

Upvotes: 1

Related Questions