基于另一个下拉动态下拉更新

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

这里是我遇到问题的地方。我想要的是基于上面的下拉菜单的结果（例如用户选择棒球），我希望第二个下拉菜单填充正确的位置数组。所以，如果他们选择篮球，那么它会立即动态地在篮球职位上填充第二个下拉页面。如果他们改变了主意并选择了足球，那么它将随着足球位置动态地填充第二个下拉列表。

这里的任何帮助表示赞赏。我正在打一个大路障......谢谢！

来源

2013-04-10 lobstahcrushah

你用ajax做。 – 2013-04-10 04:41:48

http://www.prodiven.com/jcombo/index.php?lang=en – 2013-04-10 04:43:31

调用ajax函数并传递相关的键并加载下拉菜单。 – 2013-04-10 04:43:36

请尝试：

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

来源

2013-04-10 05:32:56

这太棒了！十分感谢你的帮助！将这个工作融入到我当前的代码库中......代码的一部分是我从中学到的东西......任何想法，我可以在这里找到更多有关这方面的知识以了解更多信息？我必须在谷歌中使用错误的搜索条件。再次感谢你 – lobstahcrushah 2013-04-10 18:27:58

你想要如果用户从第一个下拉菜单中选择篮球，所有第二个下拉菜单中的篮球阵列显示记录。

所以你应该在第一个下拉列表的onChange（）事件上使用AJAX函数。

来源

2013-04-10 04:51:45

基于另一个下拉动态下拉更新

回答

相关问题