基於另一個下拉動態下拉更新

我希望有人可以幫助引導我在正確的方向。我目前有一個文件，我將其稱爲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

基於另一個下拉動態下拉更新

回答

相關問題