如何使用JavaScript在HTML开放标签中插入PHP代码生成下拉选项列表

你遇到的问题本质是服务端语言和客户端语言的执行时序差异：PHP是服务端代码，在页面返回给浏览器之前就已经执行完毕、输出最终HTML内容；JavaScript是客户端代码，在用户浏览器加载完页面后才运行，此时PHP生命周期已经结束，你在JS代码中拼接的<?php ?>片段只会被当成普通字符串处理，永远不会被PHP解析执行，自然不可能生效。而且你后续给elements.textContent赋值的操作也会直接覆盖之前写的innerHTML内容，就算PHP能执行这段代码也不会生效。

解决方案：提前把PHP读取的状态值传入JS，在JS逻辑中判断选中状态 #

第一步：先在页面的PHP部分把当前选中的州值输出为JS可读取的变量 #

<script>
// 注意用addslashes转义特殊字符，避免JS语法错误
const CURRENT_SELECTED_STATE = "<?php echo addslashes($row['state'] ?? ''); ?>";
</script>

第二步：修改JS生成下拉列表的逻辑，循环时直接判断是否需要选中 #

function php_dropdown_state(){
    let select = document.getElementById("state");
    // 先添加默认选项
    let defaultOpt = document.createElement("option");
    defaultOpt.value = "none";
    defaultOpt.textContent = "Please select your state";
    select.appendChild(defaultOpt);

    let options = ["Johor", "Kedah"];
    for(let i = 0; i < options.length; i++) {
        let opt = options[i];
        let elements = document.createElement("option");
        elements.value = opt;
        elements.textContent = opt;
        // 直接在JS侧判断是否选中
        if (opt === CURRENT_SELECTED_STATE) {
            elements.selected = true;
        }
        select.appendChild(elements);
    }
}

如果不想使用全局变量，也可以把当前选中值作为参数传给php_dropdown_state函数，在PHP输出调用函数的位置传参即可：

<script>
php_dropdown_state("<?php echo addslashes($row['state'] ?? ''); ?>");
</script>

内容的提问来源于stack exchange，提问作者Hon Wi Cong