javascript - 对于使用选择元素（ajax、bootstrap）时的每个问题

Question

我尝试<select><option> ... </option></select>使用 jquery + ajax 在元素中循环 foreach，但是在我这样做之后它没有显示任何值。

当我尝试控制台并完美显示结果数据时没有错误。但是当我为每个做的时候，“数据”并没有出现在我的选项元素中。

  $("#rm-btn").on("click", function(e) {
  let normIn = $("#norm-input").val();

  $.ajax({
    url: "regis/checkrm",
    type: "POST",
    dataType: "json",
    data: {
      norm: normIn
    },

    success: function(res) {
      if (res) {
        $("#data-pas")
          .slideDown("slow")
          .html(  
     `<table class="table table-borderless" id="datatab">
        <tbody>
            <tr>
                <td>Name</td>
                <td>:</td>
                <td>` + res.name + `</td>
                <td>Sex</td>
                <td>:</td>
                <td>` + res.sex + `</td>
            </tr>
            <tr>
                <td>Date_birth</td>
                <td>:</td>
                <td>` + res.date_birth + `</td>
                <td>Address</td>
                <td>:</td>
                <td>` + res.address + `</td>
            </tr>
            <tr>
                <td>Status</td>
                <td>:</td>
                <td>` + res.status + `</td>
                <td>Job</td>
                <td>:</td>
                <td>` + res.job + `</td>
            </tr>
        </tbody>
     </table>`
    );
        $.ajax({
          url: "regis/getdata",
          type: "POST",
          dataType: "json",
          success: function(result) {
            if (result) {
              $("table").after(
                `<div class="form-group form-row my-2 mx-2">
                                <label>Choose data</label>
                                <select class="form-control" id="data" name="data"> ` +
                $.each(result, function(i, data) {
                  $("data").append(`<option>` + data.name + `</option>`);
                }) +
                `</select>
                  </div>`
              );
            } else {}
          }
        });
      } else {
        console.log(res);
      }
    }
  });
});

标签： javascriptjquerybootstrap-4

Answer 1

您总是需要附加完整的标签

$("table").after(
  `<div class="form-group form-row my-2 mx-2">
     <label>Choose data</label>
     <select class="form-control" id="data" name="data"></select>
   </div>`);
$data = $("#data");
$.each(result, function(i, data) {
  $data.append(`<option>${data.name}</option>`);
})