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

【问题标题】：populate dropdown via ajax and automatically select a value通过ajax填充下拉列表并自动选择一个值
【发布时间】：2015-05-05 04:41:22
【问题描述】：

我对 javascript 和 ajax 有点陌生。

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

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

这是从列表中选择项目时调用的 Javascript sn-p：

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。

谢谢！

【问题讨论】：

为什么不把part 2写成ajax成功呢？
你的第二部分在 ajax 成功之前执行所以把它放在你的每个之后在 ajax 成功
首先尝试在ajax成功块中编写第2部分..看看它是否有效..
谢谢大家！在成功块中编写第 2 部分使其工作。你是对的，第 2 部分在导致问题的 ajax 脚本之前完成。我应该更多地关注 ajax 脚本中的 'async: true'...

标签： javascript jquery ajax razor

【解决方案1】：

您可以尝试使用$.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;
                       }
                } 
            });
        }
 });

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

【讨论】：

接受这个作为答案，因为它也有效。感谢您对绝对路径使用的警告......直到我遇到这个话题之前不知道如何在 ajax url 中使用相对路径：stackoverflow.com/a/26590904/2861121
很高兴它有帮助！快乐编码.. :)

【解决方案2】：

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

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

谢谢

【讨论】：