2

因此，我尝试通过以下方式使此剪辑提交表单具有交互性：

我希望第二个选择列表选项根据在第一个选择列表中选择的城市进行更改。

这是我的脚本功能代码：

<script>
function spotListChange(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == ""){
        var optionArray = ["|"];
    }
    <?php
    while ($cityList = $cityListDB->fetch()) {
        $city = $cityList['city'];
        $spotList = $db->query("SELECT * FROM spots WHERE city='$city' ORDER BY name");
        ?>
        else if(s1.value == "<?php echo $city; ?>"){
            var optionArray = ["|"
                                <?php
                                while ($spot = $spotList->fetch()) {
                                    echo ", \"" . $spot['city'] . "|" . $spot['city'] . "\"";
                                }
                                ?>
                                ];
        }

    <?php
    }
    ?>

    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}
</script>

这是带有两个选择列表的表单部分。（我将摆脱大多数可用的城市选项，只是为了使代码更短）

    <select id="city" name="city" style="margin-left: 135px;" onChange="spotListChange('city', 'spotSelectList')" required>
        <option value="" selected="selected">Ville...</option>
        <option value="Albanel">Albanel</option>
        <option value="Alma">Alma</option>
        <option value="La Doré">La Doré</option>
        <option value="Saint-Félicien">Saint-Félicien</option>
        <option value="Mashteuiatsh">Mashteuiatsh</option>  
    </select><br />
    <select id="spotSelectList" name="spot" style="margin-left: 135px;">
    </select>

如果我通过修复/文本值更改 else if 中的 PHP，它工作正常，所以问题一定存在，但我不知道问题出在哪里。

4

1 回答 1

0

帮自己一个忙并使用 jquery，它使您的代码更简单，并且那里有很多教程。我建议您从 php 对来自 jquery (javascript) 的 ajax 调用进行 json 响应。

您可以将其视为参考吗：http://simpleweb.github.io/jquery-dependent-selects/ 还有这个：http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using。 html

希望这对您有所帮助。

于 2013-05-23T03:45:31.663 回答