Question

我是javascript和ajax的新手。

我构建的页面将要求用户从列表中进行选择。选择后，将从数据库中填充下拉列表，并自动选择该下拉列表的默认值。

到目前为止，我已经能够填充下拉列表或自动选择一个值。但我不能连续做到这两件事。

以下是从列表中选择项目时调用的Javascript代码段：

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;
        }
    }
}

我用过 $("#Details_" + index + "_ConversionID").empty();因为我从下拉列表中的所有可能选项开始。

如果我从一个空的下拉列表开始，ddl.options.length将因某种原因返回0。

根据我的理解，我写的ajax脚本并没有真正改变下拉框的属性（ddl.options.length返回0或带有或不带ajax操作的完整列表）。如果这是真的，那么填充该下拉列表的正确方法是什么？

顺便说一句，我使用的是cshtml和.net。

谢谢！

Answer 1

您可以在Ajax Success中编写以下代码：

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

由于

Answer 2

您可以尝试使用$.when和.done，如下所示：

一旦设置了选项，它将执行您的代码

$.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;
                       }
                } 
            });
        }
 });

我还想建议一件事！请不要使用完整的网址作为您的ajax网址，因为当您托管网站时，这将会更改，http://localhost:8007/将不再可用！

通过ajax填充下拉列表并自动选择一个值

2 个答案: