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从（缓存，数据库）中取出它们并填充选项值。

AJAX预先填充的下拉菜单

1 个答案: