如何在javascript中插入带有innerHTML的php数组答案

【问题标题】：How to insert a php array with innerHTML in javascript如何在javascript中插入带有innerHTML的php数组
【发布时间】：2019-11-19 13:22:21
【问题描述】：

我希望能够从 javascript 中插入 html 代码，它会插入包含数组的 php 代码。我所做的是在变量 $ teams 中获取一组团队。然后我用foreach遍历数组来设置选择选项中的值

我已经做了以下，但它不起作用。

document.getElementById('selectTeam').innerHTML = '<select class="form-control"><?php $teams = ControllerTeam::ctrTeam(); foreach ($teams as $key => $value) { echo '<option value="'.$value["id"].'">'.$value["name"].'</option>';}?></select>';

【问题讨论】：

“不起作用”是什么意思？它不改变内容吗？改成的内容不正确？
而不是 PHP 代码，尝试硬编码 <option value="123">Aha</option> 看看是否可行
@cornel.raiu 控制台抛出以下错误：login.js: 78 Uncaught TypeError: Can not set property 'innerHTML' of null。我尝试了一个更简单的例子，它可以工作。我认为问题是innerHTML中php部分中双引号和单引号的组合
这行得通吗？ document.getElementById('selectTeam').innerHTML = '<select class="form-control"><option value="123">Aha</option></select>';
@cornel.raiu 是的。现在最简单的例子起作用了。现在问题出在内部的php部分，我想我确定是因为双引号和单引号

标签： javascript php jquery html

【解决方案1】：

第一个问题是，内容可能是在 JS 之后加载的，因此选择器返回 null，因此 OP 代码中出现错误。 Cannot set property 'innerHTML' of null

这意味着，您应该只在 window.load 或任何其他类似事件上执行 JS 代码，以确保在尝试执行之前加载 HTML。

现在，对于 cmets 中的另一个问题，如果您像这样重写 PHP 代码：

<?php
$teams = ControllerTeam::ctrTeam();

$options_html = '';
foreach ($teams as $key => $value) { 
    $options_html .= '<option value="' . $value["id"] . '">' . $value["name"] . '</option>';
}?>

在 JS 中 - 确保它加载到 window.load 或类似 -

document.getElementById('selectTeam').innerHTML = 
    '<select class="form-control"><?php echo $options_html ?></select>';

这使代码更具可读性并帮助您更轻松地调试。

【讨论】：

完美！谢谢你:)
很高兴能帮上忙！

【解决方案2】：

您的代码中有错字。请将其更改为：

document.getElementById('selectTeam').innerHTML = '<select class="form-control"><?php
$teams = ControllerTeam::ctrTeam();
foreach ($teams as $key => $value) {
    echo '<option value="' . $value["id"] . '">' . $value["name"] . '</option>';
}
?></select>';

【讨论】：

您给我的代码也包含输入错误。我把它放在我的项目中，它给出了错误
我认为问题是双引号和单引号
为什么不在 JS 之外准备选项字符串，只在其中添加一个变量。代码将更具可读性。