for each problem when using select element (ajax, bootstrap)

Viewed 52

I tried to loop with foreach in <select><option> ... </option></select> element with jquery + ajax, but it doesn't show any value after I did it.

There's no error When I tried to console and it perfectly showing the result data. But the "data" when I do for each doesn't appear in my option element.

  $("#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);
      }
    }
  });
});
1 Answers

You always need to append complete tags

$("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>`);
}) 
Related