如何生成也包含并运行javascript中php代码的html代码（onclick事件）

首先，我知道这个问题本身有点错误，因为php无法从浏览器上运行，但我这样问是为了让您了解我需要实现什么

我的问题很简单。 我得到了一张有一些输入的表格。基本上是一个表单，用于创建食谱名称、类型、是否素食等，以及配料列表 我想要一个按钮，每当用户点击它时，在表单中添加一个输入。 问题是，我需要创建的select输入包含需要运行以获取其内容的php代码，我显然不能只将输入附加到html中

我假设我需要使用AJAX，但我从来没有使用过它，我无法在数小时的研究之后找到如何继续的方法，因为我可能没有想到正确的方法

我的代码是这样的：

HTML/PHP文件：

    <form>
        // some inputs

        <select name="ingredient1" id="ingredients"> <!-- my select input for the first ingredient -->
            <?php 
            foreach ($ingredients as $ingredient) { ?>
                <option value="<?php echo $ingredient['id']; ?>"><?php echo $ingredient['name']; ?></option>
            <?php } ?>
        </select>

        <div id="add_ingredient_button"></div> <!-- the button with the onclick event -->

    </form>

嗯，我知道这可能非常混乱，而且它不能像这样工作，因为php不会由客户端运行，它显然会作为注释或纯文本插入dom中，但我不知道如何在AJAX中生成输入代码

很抱歉，我对网络开发还不熟悉，我可能没有想到正确的方法

---

无论如何，感谢您的时间和回答

如果总是同一个选择元素具有相同的选项，那么您可以简单地克隆选择元素。像这样：

HTML/PHP：

<div id="selectors_container">
 <select name="ingredient1" class="ingredients">
  [your PHP code]
 </select>
</div>

有关更多详细信息，您可以查看： 或者对于ajax请求：

---

所以我不确定你到底想做什么。如果您编写PHP，它将在浏览器中转换为html。可以使用Jquery或vanilla检索html。因此，在加载页面并创建html之后，您可以从选择/下拉/输入中检索表单值

我提供的代码允许您通过按下按钮添加新输入，更改选择值，然后打印最终结果。最终结果可以转换为json，并通过ajax作为主体参数传递

设IngreditCount=0； $document.readyfunction{ addInputEventListener； 手工完成； }; 常量addInputEventListener==>{ $“添加输入”。单击=>{ IngCreditCount+=1； $'main-form'。追加`` } } handleFormCompletion==>{ 让成分={} $'print-Components'。单击=>{ 配料['select']=$'select[name=配料]'.val $'input'.eachi=>{ 配料[$'input'.eqi.attr'name']=$'input'.eqi.val } console.LogingElements ///ajax在这里发布请求 } } 有机的 非有机 葡萄 泡菜 添加输入 印刷材料

---

建议尝试改变你的思维模式。让PHP仅作为服务器端代码，javascript作为客户端代码。javascript通过ajax从PHP请求数据，然后在返回时呈现数据。构建选择框的PHP脚本可能会构建JSON以发送回。我一直在努力思考事情应该如何运作。我想这是有经验的，否则我就完蛋了！但在这种情况下，我可能只是没有充分说明我想要实现什么，因为客户端/服务器端是非常明显的东西。我知道我需要AJAX，我只是不知道如何使用它，但我想我会探索一些教程等。。不管怎样，谢谢。这可能是一个兔子洞。你必须决定你愿意一次咬多少。但这种思维模式的核心基本部分是，所有HTML都是HTML/JavaScript，PHP只通过JSON发送数据。Lumen是一个伟大的PHP框架，用于创建发送JSON的PHP服务。如果您想继续使用jQuery，这里有很多ajax入门教程。如果你想咬下更多，看看React。一开始它会让人反感，但一旦你喝了Koolate，你就再也不会回头了。这不完全一样，因为我想我需要为每个选择使用不同的名称，这样我才能在最后得到每个值？您好，谢谢您的回答。我可能解释得不对。我想要的是非常简单，但可能有更好的方法来管理它，所以我的样本很糟糕。基本上，我有一个php函数，可以从数据库中的表中查询所有成分。在我的表单中，我得到了一个select，其中所有的成分php循环到我从查询中得到的数组中，并显示select中的所有选项，但是由于一个菜谱可能包含更多的成分，我需要一个按钮来添加这样一个select。但是php将不再运行，因为js在页面加载后添加了它

<div id="selectors_container">
 <select name="ingredient1" class="ingredients">
  [your PHP code]
 </select>
</div>

// select the last element by class and get the last child
var item = document.getElementByClass("ingredients").lastChild;
// Copy the element and its child nodes
var clone = item.cloneNode(true);
// Append the cloned element to your container
document.getElementById("selectors_container").appendChild(clone);