ajax搭配PHP、MySQL輸出動態下拉式選單

動態下拉式選單似乎是詢問度很高的設計需求,jquery甚至還有許多plugin可以選;不過試用過好幾個plugin都不是很順手,後來想想其實動態下拉式選單並不是多難的東西,於是就花了點時間自己寫,順便也測試自己邏輯夠不夠清楚。

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

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

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

categories items
TV 46″
TV 50″
Player BD
Player DVD
Player VCD

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

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
deal.php

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
});

結束收工!

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

One Comment

Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *