AJAX 预填充下拉菜单

Question

这有点复杂，所以请耐心等待：

在 FORM.php 上，我有 2 个下拉菜单：

Plant type 下拉菜单允许用户选择“Plant type”。

Plant sub-type 下拉菜单通过 AJAX 和对数据库的调用提供了“Plant sub-type”的多种选择。

AJAX 代码：

<script type="text/javascript">
    function getXMLHTTP() {
        var xmlhttp = false;
        try {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e1) {
                    xmlhttp = false;
                }
            }
        }
        return xmlhttp;
    }

    function getPlantSubtype(strURL) {
        var req = getXMLHTTP();
        if (req) {
            req.onreadystatechange = function () {
                if (req.readyState == 4) {
                    if (req.status == 200) {
                        document.getElementById('plant_subtype_div').innerHTML = req.responseText;
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }
            }
            req.open("GET", strURL, true);
            req.send(null);
        }
    }
</script>

效果很好，当我提交时，值将保存在数据库中并显示在表单下方的表格中。

现在，用户想要编辑此条目，请单击包含信息的表格单元格旁边的“编辑”。

“植物类型”和“植物子类型”的值通过 $_POST 传递到 EDIT.php。

EDIT.php 代码（使用 Smarty 标签）：

<select name="plant_type" onchange="getPlantSubtype('plant_subtype.php?plant_type='+this.value)">
    <option selected="selected" value="{$plant_type}">
        {$plant_type}
    </option>

    <option value="" disabled="disabled">
        ---
    </option>

    <option value="1">
        Tomato
    </option>

    <option value="2">
        Carrot
    </option>
</select>

<div id="plant_subtype_div">
    <select name="plant_subtype">
        <option selected="selected" value="{$plant_subtype}">
            {$plant_subtype}
        </option>

        <option value="" disabled="disabled">
            ---
        </option>
    </select>
</div>

在 EDIT.php 上，两个下拉菜单都显示正确的值。

但是当我点击Plant sub-type下拉菜单时，多个选择不可用。

这是因为表单已预先填充了 $_POST 并且 onChange 尚未发生。

加载 EDIT.php 时，如何使 Plant sub-type 下拉列表显示其选择？

Answer 1

一种选择是在页面加载时调用 getPlantSubtype('plant_subtype.php?plant_type={$plant_type}') 。

例如（在页面底部）：

<script type="text/javascript">
    getPlantSubtype('plant_subtype.php?plant_type={$plant_type}')
</script>

更好的选择是从 plant_subtype.php 从（缓存、数据库）获取子类型并填充选项值的同一位置获取子类型。