动态下拉更新基于另一个下拉 - Dynamic drop down updates based on another drop down

我希望有人能帮助我在正确的方向。我目前有一个文件，我将其命名为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>

这就是我遇到问题的地方。我想要的是基于上面的下拉结果(例如，用户选择棒球)，我想要第二个后续下拉填充正确的位置数组。因此，如果他们选择篮球，它会立即动态地填充页面上的第二个下拉框，显示篮球位置。如果他们改变主意并选择Football，它将动态地用足球位置填充第二个下拉框。

这里的任何帮助都是感激的。我遇到了一个大障碍…谢谢你! !

请尝试:

<?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不是一个好方法。

如果用户在第一个下拉列表中选择了篮球，那么在第二个下拉列表中显示所有的篮球记录。

所以你应该使用AJAX函数onChange()事件的第一个下拉。