如何在Laravel框架下使用jQuery将MySQL数据渲染到select下拉选项中

AI 小北

2026-9-29

问题根因

你的代码存在3个核心错误导致布局和渲染异常：

HTML拼接逻辑错误：<select>标签尚未拼接完成时，你就在$.each循环中直接向.add-more容器追加option，且每次循环都额外携带了</select></td>闭合标签，直接破坏了DOM结构的嵌套关系
标签语法缺失：商品编码输入框对应的<td>未闭合，商品名称输入框的required属性后漏写了标签闭合符>
追加逻辑不符合需求：每次触发点击事件就清空.add-more容器全部内容，如果你要实现多行新增的需求，这个逻辑也不符合预期

修正后代码

var i = 0;
$("#add-more-item").click(function () {
  ++i;
  $.ajax({
    type: "GET",
    url: "/admin-master/get_item_category",
    dataType: "JSON",
    success: function (res) {
      // 先拼接所有option的HTML字符串
      let optionStr = "";
      $.each(res, function (itemcategory_name, id_item_category) {
        optionStr += `<option value="${id_item_category}">${itemcategory_name}</option>`;
      });
      // 完整拼接整行的HTML结构，一次性追加
      let newRow = `
      <tr>
        <td><input type="text" name="item_code[${i}]" class="form-control" placeholder="Kode Barang" required></td>
        <td><input type="text" name="item_name[${i}]" class="form-control" placeholder="Nama Barang" required></td>
        <td>
          <select class="form-control" name="item_category[${i}]">
            ${optionStr}
          </select>
        </td>
      </tr>`;
      // 如果需要保留之前添加的行，删除下面这行empty()即可
      // $(".add-more").empty();
      $(".add-more").append(newRow);
    },
  });
});