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

Posted 2023-05-07

【中文标题】如何在javascript中插入带有innerHTML的php数组

【英文标题】：How to insert a php array with innerHTML in javascript

【发布时间】：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部分，我想我确定是因为双引号和单引号

【参考方案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 之外准备选项字符串，只在其中添加一个变量。代码将更具可读性。