PHP数组传递至jQuery动态下拉框显示undefined问题求助

问题根源 #

静态下拉框能正常加载数据，但动态生成的下拉框显示undefined，核心原因是PHP数组传递给JS的方式错误：

• PHP中直接echo $data输出数组时，会被转为字符串"Array"，而非JS可识别的对象数组。
• JS拿到字符串后循环遍历每个字符，访问不存在的acount_mounte、acount_name属性，自然返回undefined。

解决方案 #

1. 修正PHP数据传递逻辑

将PHP数组转为JSON格式字符串，直接输出给JS（无需额外引号包裹）：

// 替换原JS中的 var data = '<?php echo $data; ?>';
var data = <?php echo json_encode($data); ?>;

2. 优化JS下拉框生成代码

确保JS正确解析数组并生成选项，同时修复DOM重复ID问题：

var data = <?php echo json_encode($data); ?>;
var product_dd = "";

// 封装下拉框构建函数，便于复用
function buildDropdown() {
  product_dd = '<select class="form-control select_acount" name="account[]" required>';
  product_dd += '<option value="">--الحساب--</option>';
  if(Array.isArray(data) && data.length > 0){
    data.forEach(item => {
      product_dd += `<option value="${item.acount_mounte}">${item.acount_name}</option>`;
    });
  }
  product_dd += "</select>";
}

// 页面加载时先初始化下拉框模板
buildDropdown();

var i = 0;
$("#add-btn").click(function() {
  ++i;
  // 移除重复ID，避免DOM冲突
  $("#dynamicAddRemove").append(`
    <tr>
      <td class="td">${product_dd}</td>
      <td class="td">
        <input type="number" name="debtor[${i}]" class="form-control debtor arabicNumbers" onkeydown="return event.keyCode !== 69" required>
      </td>
      <td class="td">
        <input type="number" name="creditor[${i}]" class="form-control creditor arabicNumbers" onkeydown="return event.keyCode !== 69" required>
      </td>
      <td class="td">
        <input type="text" name="description[${i}]" class="form-control" required>
      </td>
      <td>
        <input type="text" name="mount[${i}]" class="form-control mount" required>
      </td>
      <td>
        <button type="button" name="add" class="btn btn-danger remove-tr">
          <i class="fas fa-trash-alt"></i>
        </button>
      </td>
    </tr>
  `);
});

$(document).on('click', '.remove-tr', function() {
  $(this).parents('tr').remove();
});

3. 额外安全优化（避免SQL注入）

原PHP查询使用字符串拼接存在安全风险，改用预处理语句：

$query = "select * from sah7atmain_acouts WHERE company = ?";
$stmt = mysqli_prepare($con, $query);
mysqli_stmt_bind_param($stmt, "s", $multi);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$data = mysqli_fetch_all($result, MYSQLI_ASSOC);

内容的提问来源于stack exchange，提问作者user15415284