PHP数组转JSON传递给JS填充HTML select时按单个字符渲染问题如何解决

问题根因 #

你遇到的问题核心有3个：

1. PHP输出逻辑错误：你调用json_encode()处理完数组后，没有输出JSON序列化后的字符串，反而用print_r($myArray)输出了原始数组的可读格式。就算后续调整为输出JSON内容，传递到JS侧的默认也是字符串类型，不是JS可直接遍历的数组对象
2. JS侧没有反序列化JSON字符串：你拿到的myArray本质是JSON格式的字符串，直接遍历字符串会按单个字符迭代，自然出现单个字符成为选项的问题
3. JS代码存在语法错误：变量未初始化、DOM方法名拼写错误、未指定下拉框的ID

修复步骤 #

第一步：修正PHP侧输出逻辑 #

你需要直接输出json_encode()的处理结果，不要用print_r输出原始数组：

$myArray = // 你的LDAP查询结果数组
echo json_encode($myArray);

第二步：JS侧反序列化JSON字符串为数组 #

你拿到PHP传递的字符串后，先用JSON.parse()转成JS数组：

// 假设你拿到的PHP输出赋值给了jsonStr变量
const myArray = JSON.parse(jsonStr);

第三步：修正填充下拉框的JS代码 #

修正变量初始化、方法拼写、补充下拉框ID：

// 初始化空字符串，避免拼接时出现undefined
let fillUserSelection = '';
// 用for of遍历数组更简洁，避免for in的原型链遍历问题
for (const name of myArray) {
  fillUserSelection += `<option>${name}</option>`;
}
// 注意方法名是getElementById，b大写，括号内填入你下拉框的实际ID
document.getElementById('your-select-id').innerHTML = fillUserSelection;

可选优化：直接嵌入JS数组（无需序列化/反序列化） #

如果你是在PHP模板中直接生成JS代码，可以直接把JSON结果输出到JS代码中，省去转字符串再解析的步骤：

const myArray = <?php echo json_encode($myArray); ?>;

这样拿到的直接就是JS数组，可以直接遍历使用。

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