動態下拉式選單的邏輯說穿了很簡單：選定第一層選項後（選項可以用html列或是從資料庫拉），第二層選單會根據第一層選項跳出對應的內容（如果有第三層也是同樣的邏輯，只是資料庫的設計會多一層欄位）。

邏輯了解之後，又要如何用程式表達呢？
1. 假設第一層選單是從資料庫拉，那麼首先就要透過PHP先把第一層選單的項目從資料庫裡撈出來
2. 由jquery取得選取的項目，並用ajax傳到後端負責「打撈」的PHP頁面（假設為deal.php）
3. deal.php取得第一層選項，並把對應的第二層項目撈出來、回傳給ajax
4. 最後，ajax的success:function(res){}再把回傳的第二層項目插入第二層select的option
大功告成！

接下來，在開始準備程式前，首先需要把資料庫準備好。舉例來說，我希望第一層是產品的分類項目，第二層是分類項目下的產品型號，那麼在資料庫就需要先建「分類」與「型號」的欄位，簡單規劃如下：

資料庫建好之後，就可以開始著手頁面了：

1. 建置html選單：

<div>
   <select id='categories'>
      <option>選擇系列</option>
   </select>
</div>
<div>
   <select id='items'>
      <option>選擇產品</option>
   </select>
</div>

2. 插入PHP語法把categories的項目從資料庫裡撈出來：

<div>
   <select id='categories'>
      <option>選擇系列</option>
<?
$sql = "SELECT DISTINCT categories FROM 表格名稱";//DISTINCT可選出欄位中具有不同名稱的資料，本例中會挑出TV與Player
$result = mysqli_query($link, $sql) or die("資料選取錯誤！".mysqli_error($link));
while($data=mysqli_fetch_assoc($result)){
?>
      <option value="<?echo $data['categories'];?>"><?echo $data['categories'];?></option>
<?
}
?>
   </select>
</div>
<div>
   <select id='items'>
      <option>選擇產品</option>
   </select>
</div>

3. 抓取被選取的選項，透過ajax丟到後端deal.php：

$(document).on('change', '#categories', function(){
   var categories = $('#categories :selected').val();//注意:selected前面有個空格！
   $.ajax({
      url:"deal.php",				
      method:"POST",
      data:{
         categories:categories
      },					
      success:function(res){					
         //處理回吐的資料
      }
   })//end ajax
});

4. deal.php取得分類選項，從資料庫裡撈對應的型號出來：

$categories = $_POST['categories'];
$sql = "SELECT items FROM 資料表名稱 WHERE categories = '$categories'";
$result = mysqli_query($link, $sql) or die("取出資料失敗！".mysqli_error($link));
$res = "";//把準備回傳的變數res準備好
while($data=mysqli_fetch_assoc($result)){
   $res .= "
      <option value='{$data["items"]}'>{$data['items']}</option>
   ";//將對應的型號項目遞迴列出
};
echo $res;//將型號項目丟回給ajax

5. 最後一個步驟，將deal.php吐回的項目列表塞回DOM的select裡面：

$(document).on('change', '#categories', function(){
   var categories = $('#categories :selected').val();
   $.ajax({
      url:"deal.php",				
      method:"POST",
      data:{
         categories:categories
      },					
      success:function(res){					
         $('#items').html(res);
      }
   })//end ajax
});

結束收工！

實際跑過整個流程之後，是不是發現動態下拉式選單真的不複雜，只是若要到三層、四層……，資料庫的設計就要更多欄位而已，說不定反倒是把所有資料輸入資料庫欄位還比較花時間咧！