首先，我知道这个问题本身有点错误，因为 php 无法从浏览器运行，但我以这种方式要求你了解我需要实现的目标。
好吧，我的问题很简单。 我得到了一个包含一些输入的表格。(基本上是创建食谱的表格(名称，类型，蔬菜与否等，以及成分列表( 我想要一个按钮，每次用户单击它时都会在表单中添加输入。 问题是我需要创建的选择输入包含需要运行以获取其内容的 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>
.JS：
$( document ).ready(function() {
let ingredientCount = 1
const addIngredientInput = function () {
ingredientCount++
let newSelect = // here let's say I try to concatenate my html and php to get the exact same code than the select input above in the html code plus the right ingredient count to get ingredients2, ingredients3 etc..
$('#add_ingredient_button').before(newSelect)
return ingredientCount
}
$('#add_ingredient_button').on('click', function(){
addIngredientInput()
})
});
好吧，我知道这可能非常混乱，而且它不能像这样工作，因为 php 不会由客户端运行，而且它显然会作为注释或纯文本插入到 dom 中，但我不知道如何在 AJAX 中生成我的输入代码
很抱歉挣扎，但我是网络开发的新手，我可能没有考虑正确的方法
无论如何感谢您的时间和答案
如果它始终是具有相同选项的相同选择元素，那么您可以简单地克隆选择元素。喜欢这个：
HTML/PHP：
<div id="selectors_container">
<select name="ingredient1" class="ingredients">
[your PHP code]
</select>
</div>
.JS：
// 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);
有关更多详细信息，您可以查看：https://www.w3schools.com/jsref/met_node_clonenode.asp 或者对于 AJAX 请求： https://www.w3schools.com/js/js_ajax_intro.asp
所以我不确定你想做什么。如果你写PHP，它会在浏览器中转换为html。该 html 可以使用 Jquery 或 vanilla 进行检索。因此，在加载页面并创建 html 后，您可以从选择/下拉列表/输入中检索表单值。
我提供的代码允许您通过按按钮添加新输入，更改选择值，然后打印最终结果。 最终结果可以转换为 JSON 并使用 Ajax 作为 body 参数传递。
let ingredientCount = 0;
$( document ).ready(function() {
addInputEventListener();
handleFormCompletion();
});
const addInputEventListener = () => {
$('#add-input').click(() => {
ingredientCount += 1;
$('#main-form').append(`<input name="ingredient-${ingredientCount}"></input>`)
})
}
handleFormCompletion = () => {
let ingredients = {}
$('#print-ingredients').click(() => {
ingredients['select'] = $('select[name="ingredients"]').val()
$('input').each(i => {
ingredients[$('input').eq(i).attr('name')] = $('input').eq(i).val()
})
console.log(ingredients)
///ajax post request here
})
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<form id="main-form">
<select name="ingredients" form="main-form">
<option value="organic">Organic</option>
<option value="not organic">Not Organic</option>
<option value="grapes">Grapes</option>
<option value="pickles">Pickles</option>
</select>
</form>
<button type="button" id="add-input">add Input</button>
<button type="button" id="print-ingredients">print Ingredients</button>
</html>