通過從選擇菜單中選擇一個選項，如何強制另一個選擇菜單自動加載特定選項？

Question

通過從選擇菜單中選擇一個選項，如何強制另一個選擇菜單自動加載特定選項？

我的意思是，我有這個PHP代碼：

<select id="video_cattegory_main" name="video_cattegory_main" style="display:inline; width:95%"> 
      <?php $query_main_menue = "SELECT video_cattegory_main FROM video_tutorials GROUP BY video_cattegory_main"; 
      $main_menue = mysql_query($query_main_menue, $webiceberg) or die(mysql_error()); 
      while ($row_main_menue = mysql_fetch_assoc($main_menue)) { ?> 
      <option name="video_cattegory_main" value="<?php echo $row_main_menue['video_cattegory_main']?>" ><?php echo $row_main_menue['video_cattegory_main']?></option> 
      <?php } ?> 
      </select> 

這是什麼劑量它加載從表中的值進入選擇菜單，我還有一個選擇菜單，就像這一次，但在第二一個我希望它根據第一個的選擇加載。

換句話說這將是最好的辦法就是，當在選擇菜單中選擇一個選項，自動迫使另一個選擇菜單

默認值可以這樣在PHP唯一目的或我將需要添加js我對此知之甚少

Answer 1

是的，你必須使用javascript來達到這個目的。加載頁面時加載第二個select-dropdownbox的所有值就足夠了。

如果第二個下拉框的顯示值取決於第一個選擇框的選擇，那麼您可能需要使用AJAX。當第一個下拉框顯示一個國家，並選擇一個時，你想顯示這個國家的某些城市！

第一件事可以很容易地實現，取決於你想在第二個盒子中選擇什麼。如果您對JavaScript有很少的瞭解，可以使用例如jquery，這是一個很好的框架，可以很容易地解決這樣的練習！

但是，您必須提供更多關於selectbox 1的哪個選擇應該自動選擇selectbox 2的哪個選項的更多信息！

您可以使用jQuery的onchange()（link）函數，例如，看看那個簡單的example！您可以通過不用顯示文本來更改第二個選擇框的選定值http://api.jquery.com/val/

Answer 2

您可以在不使用任何Javascript的情況下使用PHP執行此操作，但這意味着您必須刷新頁面。雖然我會推薦Javascript。

用PHP做到這一點的最好方法是將表單發佈到自身。在第一個選擇框被選中後，應該有一個提交按鈕。

然後，PHP腳本會檢查第一個選擇是否已提交。如果已經存在，則第二個將基於來自第一個的值生成。如果沒有，表格會在沒有第二次選擇的情況下輸出。

再次，Javascript是一個更好的解決方案，因爲PHP解決方案會引發其他問題，如處理其他表單變量。

Answer 3

您需要使用Javascript。

PHP是一種服務器端編程語言。所以PHP代碼在之前運行客戶端能夠看到該網頁。當網頁在客戶端可見時，PHP無法修改頁面。

Javascript是一種客戶端語言。它可以讓你修改DOM（HTML）而的用戶仍然在查看的頁面。

這個片段應該讓你開始。

<select id="select-0"> 
    <option value="0">a0</option> 
    <option value="1">a1</option> 
    <option value="2">a2</option> 
    <option value="3">a3</option> 
</select> 

<select id="select-1"> 
    <option value="0">b0</option> 
    <option value="1">b1</option> 
    <option value="2">b2</option> 
    <option value="3">b3</option> 
</select> 

<script type="text/javascript"> 
// select a specific element 
var element = document.getElementById('select-0'); 

// add a "listener" that allows you to run code when an event occurs 
element.addEventListener('change', function() { 
    // select-0 is changed, so we wish to change the value of select-1 
}); 
</script>