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

我对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\uu+index+\u ConversionID.empty；因为我从下拉列表中的所有可能选项开始

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

据我所知，我编写的ajax脚本并没有真正改变下拉框ddl.options.length的属性，无论是否使用ajax操作，它都会返回0或完整列表。如果这是真的，那么填充下拉列表的正确方法是什么

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

---

谢谢

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

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

谢谢

您可以尝试使用$。时间和。操作如下：

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

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

---

我还想建议一件事！请不要使用完整的url作为您的ajax url，因为当您托管该站点时，这将发生变化并http://localhost:8007/ 将不再可用

为什么不在ajax成功之前编写第2部分呢？在ajax成功之前执行第2部分，因此请将其放在ajax成功之后。首先尝试在ajax成功块中编写第2部分。。看看能不能用……谢谢大家！在成功模块中编写第2部分使其成功。您是对的，第2部分是在ajax脚本出现问题之前完成的。我应该更加注意ajax脚本中的“async:true”…接受这个答案，因为它也可以工作。感谢关于绝对路径使用的警告。。。。我不知道如何在ajax url中使用相对路径，直到我遇到这个主题：很高兴它有帮助！！快乐编码..：