javascript - How to dropdown bind according to this record

Question

I have two loops:

• table loop: fills the table rows
• dropdown loop: fills the dropdowns with typeid.data[i].TypeId, add a select in the last dropdown

My dropdown does not fill according to its record and I don't understand why.

  var QuestionId = data[i].QuestionOid;
                            var fkid = data[i].FkSource;
                            var selectdata = data[i];
var selectinnerhtml = "<span><select id = \"answer" + QuestionId + "\" name = \"answer" + QuestionId + "\" class=\"answer" + QuestionId + " form-control input-small\" > </select></span>";
$.ajax({
  type: "GET",
  dataType: 'json',
  contentType: 'application/json; charset=utf-8',
  url: '/MYaPI/EmployeeDetails/' + data[i].TypeId,
  success: function(datasa) {
    var optionhtmls = '<option value="' +
      0 + '">' + "--Select--" + '</option>';

    $(".answer" + QuestionId).append(optionhtmls);

    $.each(datasa, function(j) {
      var optionhtmls = '<option value="' +
        datasa[j].Oid + '">' + datasa[j].Title + '</option>';

      $(".answer" + QuestionId).append(optionhtmls);
    });
  }
});
var newRows2select = "<tr class='rows'><a href = '' >" +
  " <td QuestionCategoryTitle = " + selectdata.QuestionCategoryTitle + " QuestionHeader = " + selectdata.QuestionHeader + " ContentTypeId=" + selectdata.FkSource + " QuestionTypeId=" + selectdata.FkQuestionType + "   QuestionOID=" + selectdata.QuestionOid + " CategoryOID=" + selectdata.FkQuestionCategory + "  class=\"question-block\"><small style=\"color:slateblue;font-weight: bolder;display:none\">CATEGORY: " + selectdata.QuestionCategoryTitle + ",</small>" +
  "  <i  class=\"deleteRow fas fa-trash float-right\"></i> " +
  "<p> " + selectdata.QuestionHeader + "</p>" + selectinnerhtml + " </td></a> \"</tr>";
$("#table23").append(newRows2select);

标签： javascriptjqueryajaxdom-events

Answer 1

我不知道 jQuery 方式，但是使用纯 JavaScript 很容易实现

var select = document.createElement("select");
var selectinnerhtml = document.createElement("span");
selectinnerhtml.appendChild(select);   
$.each(datasa, function(j) {

    //create a new option element
    var option = document.createElement("option");

    //set the value attribute
    option.setAttribute("value", datasa[j].oid);

    //fill the HTML tag
    option.value = datasa[j].Title

    //add the option to the select dropdown
    select.add(option);
});