Выпадающий список (веб-формы Asp.net) не заполняется данными

Question

У меня есть вызов jQuery для получения данных и раскрывающийся список в пользовательском интерфейсе, который не заполняет данные.Я пробовал много способов, прокомментировал код, который я использовал.Дайте мне знать, если я сделал что-то не так в коде.

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>

Answer 1

Поскольку я получил ответ с небольшим опозданием, я сделал метод проб и ошибок и, наконец, заставил его работать.Вот изменения кода, которые я сделал, чтобы он заработал.

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]");-> работал

Answer 2

Ваш обработчик возврата данных немного выключен, когда возвращенные данные получены, вы можете сделать следующее, чтобы уменьшить это:

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.