Question

所以我试图通过以下方式使这个剪辑提交表格互动：

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

这是我的脚本功能代码：

<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>

如果我通过修复/文本值更改其他内部的PHP，它可以正常工作，所以问题必须存在，但我不知道问题出在哪里。

Answer 1

帮自己一个忙，并使用jquery，它使你的代码更简单，并且是一个很多的教程。我建议你从jQuery（javascript）发出一个json响应从ajax调用。

你能看到这个作为参考：http://simpleweb.github.io/jquery-dependent-selects/ 还有：http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html

希望这会对你有所帮助。

交互式表单取决于选择列表不起作用

1 个答案: