javascript - 我怎样才能分配这个变量而不会在 php 中出错？

Question

我有一个我正在处理的 php 文件列表，在一个 php 文件中我能够使这个函数工作，但只有当它以这种方式设置时。

<script>
    function addingredient() {
    var table = document.getElementById("ingredients_table");
    var row = table.insertRow(y);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = ' <select name="ingredients[]"  style="width: 200px"> <option value="option">option</option></select> ';
    cell2.innerHTML = ' <select name="measurements[]"  style="width: 200px"> <option value="option">option</option></select> ';
    cell3.innerHTML = ' <textarea style="width: 100px" class="form-control" name="amount[]" rows="1"> ';
    y++;
    changecontent();
}
function changecontent() {
<?php  ?>
}
</script>

这是我的问题出现的地方。我不确定我是否可以使用 .js 文件，但我为这个项目写了我在 .php 中所做的一切，到目前为止，我的页面在下拉框中显示变量，具体取决于我服务器上的内容，使其成为数据驱动的.我有我的 java 脚本在它插入的地方工作，但我想将 id 和内容更改为我的预定义变量，如 id = 1，单元格会说 tbs，id = 2，单元格说 teaspn，等等。

当我尝试访问具有这些赋值的变量时，我的问题出现了。出于某种原因，当我保持原样或删除它时，它可以工作，但如果我尝试对 php 执行任何操作，它会告诉我未定义 addingredient。

我做错了什么吗？

我知道有效的一个例子是说我愿意

function changecontent() {
var temp = '<? ingredientslist ?>';
}

这会将 temp 显示为引号中的内容，这是我为使下拉列表工作而指定的值。如果我在没有引号的情况下再次这样做，它只会说 addingredient is undefined。

Answer 1

简答:您不能直接将 PHP 变量直接传递给 Javascript，因为它们都是在不同的时间编译的，PHP 在编译时编译/解释，而 javascript 在运行时编译。

对于您的问题，我建议使用 javascript 从下拉列表中获取值并使用 AJAX 动态加载内容

<script>
function addingredient() {
    //initialize your form elements
    var table = document.getElementById("ingredients_table");
    var row = table.insertRow(y);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = ' <select name="ingredients[]"  style="width: 200px" onchange="changeContent(this)"> <option value="option">option</option></select> ';
    cell2.innerHTML = ' <select name="measurements[]"  style="width: 200px" onchange="changeContent(this)"> <option value="option">option</option></select> ';
    cell3.innerHTML = ' <textarea style="width: 100px" class="form-control" name="amount[]" rows="1"> ';
}

function changeContent(element) {
    var selectedOption = element.selected.val();

    //Do a AJAX call to call your PHP script

    //And change the content in the container element
}