下拉列表（Asp.net Web 表单）未填充数据答案

【问题标题】：Drop down list (Asp.net web forms) not getting populated with data下拉列表（Asp.net Web 表单）未填充数据
【发布时间】：2019-05-16 20:44:52
【问题描述】：

我有 jQuery 调用来获取数据和 UI 上的下拉列表，它不会填充数据。我尝试了很多方法，注释的是我使用的代码。如果我在代码中做错了什么，请告诉我。

var questionData;
var optionData;

$(document).ready(function () {    
    $.ajax({
        url: 'coaching-assessment-tool.aspx/GetCATQuestionAndOptions',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (data) {            
            questionData = data.d[0];
            optionData = data.d[1];           
            console.log(questionData[0].QuestionText);
            console.log("Question Data", questionData);
            console.log("Option Data", optionData);
            //Questions
            document.getElementById('firstQuestion').innerHTML = questionData[0].QuestionText;
            document.getElementById('secondQuestion').innerHTML = questionData[1].QuestionText;
            document.getElementById('thirdQuestion').innerHTML = questionData[2].QuestionText;
            document.getElementById('fourthQuestion').innerHTML = questionData[3].QuestionText;
            document.getElementById('fifthQuestion').innerHTML = questionData[4].QuestionText;
            document.getElementById('sixthQuestion').innerHTML = questionData[5].QuestionText;
            document.getElementById('seventhQuestion').innerHTML = questionData[6].QuestionText;
            document.getElementById('eighthQuestion').innerHTML = questionData[7].QuestionText;
            document.getElementById('ninthQuestion').innerHTML = questionData[8].QuestionText;
            document.getElementById('tenthQuestion').innerHTML = questionData[9].QuestionText;
            //Responses
            //var ddlFirstResponse = document.getElementById('#ddlFirstResponse');
            //ddlFirstResponse.empty();
            $(function () {
                $('#ddlFirstResponse').append($("<option></option>").val('').html(''));
                $.each(optionData, function (key, value) {
                    //console.log('option: ' + value.OptionText + ' | id: ' + value.OptionId);
                    //$('#ddlFirstResponse').append($("<option></option>").val(value.OptionId).html(value.OptionText));
                    $("#ddlFirstResponse").append("<option value='" + value.OptionId + "'>" + value.OptionText + "</option>");
                });
            });            
        },
        error: function (error) {
            console.log(error);
            alert('Error retrieving data. Please contact support.');
        }        
    });
    
});


<asp:DropDownList ID="ddlFirstResponse" runat="server"></asp:DropDownList>

【问题讨论】：

'optionData' 有数据并且正在打印到 console.log。
什么是 JSON，错误信息是什么？

标签： javascript jquery html asp.net webforms

【解决方案1】：

获取返回数据时，您的数据返回处理程序有点偏离，您可以执行以下操作来缓解这种情况：

function (data, status) {
    var json = data;
    obj = JSON.parse(json);
    var opt = null;
    $("#targetIDOfControl").empty();

    for (i = 0; i < obj.People.length; i++) {
        if (i < obj.People.length) {
            opt = null;
            opt = document.createElement("option");
            document.getElementById("targetIDOfControl").options.add(opt);

            opt.text = obj.People[i].Name;
            opt.value = obj.People[i].ID;
        }
    }

上面的例子创建了一个选项然后设置它的文本和值。然后根据返回的 JSON 数组中的索引数量复制更多选项。

【讨论】：

为什么是JSON.parse()？ data 应该已经被解析，每个 jQuery docs。
应该但是我遇到了一些错误，除非我专门调用它，否则它将拒绝作为解析的 JSON 运行 - 我已经这样做了，并且没有出现同样的错误。
对于 OP，我推荐这样的东西：if (typeof data === 'string') { data = JSON.parse(data); }。 JSON.parse 如果你传递一个已经解析过的对象，将会抛出一个 SyntaxError。
感谢大家的回复，非常感谢。

【解决方案2】：

由于我收到回复有点晚，所以我反复试验，终于成功了。这是我为使其正常工作所做的代码更改。

var ddlFirstResponse = **$("[id*=ddlFirstResponse]");**            
            ddlFirstResponse.empty();
            $(function () {
                ddlFirstResponse.append($("<option></option>").val('').html('-- Select value --'));
                $.each(industryOptionData, function (key, value) {
                    //console.log('option: ' + value.OptionText + ' | id: ' + value.OptionId);
                    ddlFirstResponse.append($("<option></option>").val(value.OptionId).html(value.OptionText));
                    //ddlFirstResponse.append("<option value='" + value.OptionId + "'>" + value.OptionText + "</option>");
                });
            });

//var ddlFirstResponse = document.getElementById('ddlFirstResponse'); --> 失败 var ddlFirstResponse = $("[id*=ddlFirstResponse]"); --> 工作

【讨论】：