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

【问题标题】：Dynamic drop down updates based on another drop down基于另一个下拉列表的动态下拉更新
【发布时间】：2013-04-01 18:36:28
【问题描述】：

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

这是我遇到问题的地方。我想要的是基于上面下拉列表的结果（例如用户选择棒球），我想要第二个后续下拉列表以填充正确的位置数组。因此，如果他们选择篮球，它会立即动态地填充页面上的第二个下拉列表，其中包含篮球位置。如果他们改变主意并选择足球，它将在第二个下拉列表中动态填充足球位置。

感谢您提供任何帮助。我遇到了一个主要障碍...谢谢！

【问题讨论】：

你使用 ajax 来做。
prodiven.com/jcombo/index.php?lang=en
调用ajax函数并传递相关键并加载下拉菜单。
使用普通的javascript/jquery !!
请阅读这篇我希望这篇文章有所帮助
stackoverflow.com/questions/1862148/…

标签： php ajax json

【解决方案1】：

请尝试：

<?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 就不是好办法。

【讨论】：

这太棒了！十分感谢你的帮助！打算将其合并到我当前的代码库中...代码的 += 部分是我从中学到的...知道在哪里可以找到有关此内容的更多信息以了解更多信息吗？我一定在谷歌中使用了错误的搜索词。再次感谢您

【解决方案2】：

如果用户从第一个下拉列表中选择篮球，您希望，篮球数组的所有记录显示在第二个下拉列表中。

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

【讨论】：