如何在PHP中創建動態下拉列表？

Question

表courses

courseID courseName 
    1 Diploma-Polytechnic 
    2 UG-Bachelor of Architecture (B.Arch) 
    3 UG-Bachelor of Engineering (B.E) 
    4 UG-Bachelor of Technology (B.Tech) 
    5 PG-Master of Architecture (M.Arch) 

表branch

branchID courseID branchName 
1    1 Civil Engineering 
2    1 Computer Sci & Technology 
3    1 Electrical Engineering 
4    2 E&TC 
5    2 Mechanical Engineering 

我的代碼，我想解決方案，其中我已經能夠獲取了第一個下拉列表中的所有課程

<select name="courseName"> 
     <option value="">Select Courses</option> 
    <?php $sql = "SELECT * FROM courses "; 
    $res = mysql_query($sql) or die(mysql_error()); 
    while($row=mysql_fetch_assoc($res)) { 
     ?> 
    <option value=""><?php echo $row['courseName']; ?></option> 
    <?php } ?> 
    </select> 

二下拉列表保持空白，因爲我想要這樣的東西。

如果用戶從第一個下拉列表中選擇1個課程，那麼應該從第二個下拉列表中的分支表中自動獲取數據並使用該相關課程。這將是，如果他們是更好，如果條件這

 <select name="sDepartment"> 

    <option value="">Department You Study</option> 
    <option value=""> </option></select> 

例如，如果用戶選擇的ID1Diploma-Polytechnic從1 DROPDOWNLIST然後第二屆下拉列表中應該有選擇

Civil Engineering 
Computer Sci & Technology 
Electrical Engineering 

如果可能的話PLZ給我JS/AJAX代碼兼容我的代碼。

Answer 1

你必須使用Ajax：

關於第一個選擇的變化，調用JavaScript函數，將所選擇的選項的值張貼到你的PHP代碼，這一塊應該返回例如值的相應數組到發送的值。

如果選擇1改變：打電話給你的函數，將值張貼到PHP代碼，然後：填充您選擇2的結果。

你可以使用JQuery，這很容易！

POST：https://api.jquery.com/jquery.post/

聽的變化：https://api.jquery.com/change/

Answer 2

如果你不想使用Ajax可以設置不同的列表起來常規的JavaScript時，頁面加載腳本標籤，然後第一個下拉菜單的'onchange'將第二個下拉列表的內容切換到您需要的任何預建立的組中。

基本上有一個JavaScript函數中的第二個下拉列表的所有不同的可能選項，當第一個下拉改變時根據需要重建下拉列表。

這將需要JavaScript，PHP和MySQL（您已經使用）的組合，並且根本不需要任何Ajax甚至jQuery。

例如，用這樣的onChange設置你的第一條語句。值，這樣，當它改變它發送的值的函數（記住設置ID，以及使我們可以使用的getElementById）：

<select name="courseName" id="courseName" onChange="setBranchList(this.value)" > 

有關courseName SELECT語句中一個重要的注意 - 在所提供的例子每個選項的「值」都是空的 - 爲解決此問題而設置的工作很重要。就像這樣：

<option value="<?php echo $row['courseID']; ?>"><?php echo $row['courseName']; ?></option> 

的選擇對於第二個下拉可能是這樣的（ID需要設置）：

<select name="sDepartment" id="sDepartment"> 

然後有一個JS函數像這樣一些PHP與嵌套，而內循環選擇外循環中第一個下拉列表的所有值，然後爲內循環中第二個下拉列表的所有可能值創建構建語句。

<script type="text/javascript"> 
function setBranchList(courseID) 
{ 
    var selector_to_fill = document.getElementById("sDepartment"); 
    selector_to_fill.options.length = 0; 

    <?php 

    $course_query = "SELECT * FROM courses ORDER BY courseID"; 
    $course_result = mysql_query($course_query); 

    while ($course_detail = mysql_fetch_array($course_result)) 
    { ?> 

     if (courseID == '<?php echo $course_detail['courseID']; ?>'){ 

     <?php $list_count = 0; 

      $branch_query = "SELECT * FROM branch WHERE courseID = '$course_detail[courseID]' ORDER BY branchID"; 
      $branch_result = mysql_query($branch_query); 

      while ($branch_detail = mysql_fetch_array($branch_result)) 
      { ?> 

       selector_to_fill.options[<?php echo $list_count; ?>]=new Option("<?php echo $branch_detail['branchName']; ?>", "<?php echo $branch_detail['branchID']; ?>", false, false); 

       <?php 

       $list_count++; 

      } ?> 
     } 
    <?php 
    } ?> 
} 
</script> 

當用戶訪問你的頁面時，PHP建立了一系列的IF在setBranchList函數語句根據您分貝任何的把它發送給用戶之前，還等什麼，用戶得到的是一些JavaScript，看起來像這樣：

 if (courseID == '1'){ 

      selector_to_fill.options[0]=new Option("Department You Study", "", false, false);     

       selector_to_fill.options[1]=new Option("Civil Engineering", "1", false, false);   

       selector_to_fill.options[2]=new Option("Computer Sci & Technology", "2", false, false);   

       selector_to_fill.options[3]=new Option("Electrical Engineering", "3", false, false);    
          } 

     if (courseID == '2'){   

      selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        

       selector_to_fill.options[1]=new Option("E&TC", "4", false, false);   

       selector_to_fill.options[2]=new Option("Mechanical Engineering", "5", false, false);    
          } 

     if (courseID == '3'){   

      selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
         } 

     if (courseID == '4'){   

      selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
         } 

     if (courseID == '5'){   

      selector_to_fill.options[0]=new Option("Department You Study", "", false, false);        
         } 
     } 

在此示例一些注意事項：

• 的 'selector_to_fill.options.length = 0;'部分在每次調用函數時清除第二個列表中的所有選項

• 該列表使用DOM與'new Option'構建。

• 使用php $ list_count變量，因爲select語句中的每個選項都需要一個以0開頭的索引。此變量表示每個項目的索引並通過每個循環重置，以便索引始終正確遞增。

• 我建立了這個很久以前在我瞭解了jQuery和Ajax和發佈，以確保它仍然有效之前再次測試該解決方案：對