依赖于选择列表的交互式表单不起作用

所以我想让这个剪辑提交表单以以下方式进行交互:

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

下面是我的脚本函数代码:

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

如果我通过fix/text值改变else If中的PHP，它工作得很好，所以问题一定在那里，但我不知道问题在哪里。