AJAX 预填充下拉菜单

Question

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

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

Plant type 允许用户选择“植物类型”的下拉菜单。

Plant sub-type 通过 AJAX 将其下拉，然后调用数据库会为“植物子类型”提供多种选择。

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 从 (cache, db) 获取它们并填充选项值。