Php 基于另一个下拉列表的动态下拉更新

我希望有人能帮我指引正确的方向。我目前有一个文件，我将其命名为data.php。在此文件中，我有以下数据：

$sports_arr = array();
$sports_arr[] = "Basketball";
$sports_arr[] = "Baseball";
$sports_arr[] = "Football";

我在同一data.php文件中还有以下数组：

$position = array();
$position['Basketball'][] = "Power Forward";
$position['Basketball'][] = "Small Forward";
$position['Basketball'][] = "Center";
$position['Soccer'][] = "Center Forward";
$position['Soccer'][] = "Right Wing";
$position['Soccer'][] = "Left Wing";
$position['Football'][] = "Halfback";
$position['Football'][] = "Fullback";
$position['Football'][] = "Wide Reciever";
$position['Football'][] = "Tight End";
$position['Football'][] = "Center";

问题是，我正在试图找出如何创建第一个下拉列表，该下拉列表当前正在填充以下代码：

<div class="selectStyled">
    <select name="Sport1" class="styled">
    <option id="default" value="">Your Sport</option>
        <?php natsort($sports_arr);
        foreach ($sports_arr as $key => $val) { 
            echo "<option value='" . $val . "' id='position" . $key . "'>" . $val . "</option>";
        } ?>
    </select>
</div>

你的运动
如果用户从第一个下拉列表中选择basketball，则第二个下拉列表中将显示basketball数组的所有记录

因此，您应该在第一个下拉列表的onChange（）事件上使用AJAX函数。
请尝试：

<?php
$sports_arr = array();
$sports_arr[] = "Basketball";
$sports_arr[] = "Baseball";
$sports_arr[] = "Football";

$position = array();
$position['Basketball'][] = "Power Forward";
$position['Basketball'][] = "Small Forward";
$position['Basketball'][] = "Center";
$position['Soccer'][] = "Center Forward";
$position['Soccer'][] = "Right Wing";
$position['Soccer'][] = "Left Wing";
$position['Football'][] = "Halfback";
$position['Football'][] = "Fullback";
$position['Football'][] = "Wide Reciever";
$position['Football'][] = "Tight End";
$position['Football'][] = "Center";
?>

<div class="home">
    <select id="s1">
        <?php foreach($sports_arr as $sa) { ?>
        <option value="<?php echo $sa; ?>"><?php echo $sa; ?></option>
        <?php } ?>
    </select>
    <select id="s2">
    </select>
</div>

<script type="text/javascript">
var s1= document.getElementById("s1");
var s2 = document.getElementById("s2");
onchange(); //Change options after page load
s1.onchange = onchange; // change options when s1 is changed

function onchange() {
    <?php foreach ($sports_arr as $sa) {?>
        if (s1.value == '<?php echo $sa; ?>') {
            option_html = "";
            <?php if (isset($position[$sa])) { ?> // Make sure position is exist
                <?php foreach ($position[$sa] as $value) { ?>
                    option_html += "<option><?php echo $value; ?></option>";
                <?php } ?>
            <?php } ?>
            s2.innerHTML = option_html;
        }
    <?php } ?>
}
</script>


您可以使用ajax来实现。调用ajax函数并传递相关键并加载下拉列表。使用普通javascript/jquery！！请阅读这篇文章，我希望这篇文章能有所帮助这太棒了！非常感谢你的帮助！将要将其合并到我当前的代码库中。。。代码的+=部分是我从。。。你知道我在哪里可以找到更多关于这方面的信息来了解更多吗？我一定是在谷歌使用了错误的搜索词。再次感谢你