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);
}
}
});
});