動態下拉式選單的邏輯說穿了很簡單：選定第一層選項後（選項可以用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
});

結束收工！

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

<form action='res.php' method='post'>
   <input name='name' type='text'>
   <input name='submit' type='submit'>
</form>

這樣後端的res.php頁面就可以透過POST取得name的值作處理（通常是INSERT INTO資料庫）：

<?
require_once('connect.php');//引入資料庫連結設定檔
$name = $_POST['name'];//取得name值
$sql = "INSERT INTO 表格名稱 (欄位名稱) VALUES ('$name') ";//插入表格語法
mysqli_query($link, $sql) or die("錯誤訊息：".mysqli_error($link));//執行插入
echo "資料插入成功！";//顯示訊息
?>
//這段程式沒有做任何處理，建議實際使用時對變數作if判斷來決定成功與失敗的回傳訊息

但因為這樣會將整頁html都傳出去，而這些資料大部分都是重複沒有必要的，所以後來才開始發展出ajax這種方式，僅把需要的資料丟到後端，不必整頁html都傳。如此一來不僅降低傳輸量，透過jquery的DOM操作，我們還能跳過html的form與input限制，直接把任何我們想傳的值透過抓取DOM元素丟到後端，並且把後端丟回來的東西再透過DOM作更多元的處理。

舉例來說，html碼我們可以用最習慣的div去包裹表單內容：

<div id='input'>
   <input type='text' id='name'>
   <button id='submit'>送出</button>
</div>
<div id='response' style='display:none;'>
</div>

然後javascript就變成：

$(document).on('click', '#submit', function(){ 
/*使用$(document).on()的原因是如果id為submit的按鈕是一開始沒有載入、透過ajax互動後才產生的DOM，那用$().click會抓不到，需以$(document).on()才行 */
   var name = $('#name').val();
   $.ajax({
      url:'res.php',
      method:'POST',
      data:{
         name:name
      },
      success:function(res){
         $('#input').hide();
         $('#response').show().html(res);
      }
   })
}

後端php保持原來的樣子：

<?
require_once('connect.php');//引入資料庫連結設定檔
$name = $_POST['name'];//取得name值
$sql = "INSERT INTO 表格名稱 (欄位名稱) VALUES ('$name') ";//插入表格語法
mysqli_query($link, $sql) or die("錯誤訊息：".mysqli_error($link));//執行插入
echo "資料插入成功！";//顯示訊息
?>

若ajax傳輸成功，res.php就會吐回

echo "資料插入成功！";

echo的內容會成為success:function(res){}的res，於是我們就能利用這個res變數在現有的DOM上面任意處理啦！以例子來說，就是把id為response的div從隱藏改為顯示，並將res的內容印上去：

$('#response').show().html(res);

如何？用ajax傳值是不是非常簡單？

透過res.php裡面的echo，我們可以決定任何想回傳給前端的callback（例如從資料庫裡撈東西出來作判斷後回吐，許多即時驗證用戶名是否重複的ajax功能即是這種應用），然後前端再於success:function(res){}裡面對回傳的res作處理。只要理解ajax與後端的溝通流程，光是簡單的前後端互動就能創造很多漂亮又即時的網頁效果囉！至於圖片與多個重複欄位的表單要如何以ajax處理，就留給下一篇介紹吧！

google “php pdf”，很快就能找到「TCPDF」這個class。

TCPDF的使用方式非常簡單，只要新增一張負責輸出的.php頁面，並require進去即可。例如：

<?php 
require_once('tcpdf.php'); 
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
?>

這樣檔案裡就能以$pdf->blablabla去設定輸出內容與格式了。

BUT!人生永遠有個BUT，那就是TCPDF的預設中文字體是msungstdlight，非常醜，醜到我沒有臉用這個字體產生的報價單寄給客戶。於是就得找其他字體來用：TCPDF內建的日文漢字cid0jp很不錯，但太多中文字會缺字，沒辦法用；網路上有很多人教說用android的預設字體DroidSansFallback可行，我也去下載了這個字體來用，但竟然發生了中英文一起出現時，英文（或阿拉伯數字）變亂碼的詭異狀況。爬文爬了很久，直到找到這篇才知道問題出在哪裡：原來是字體檔內建字型不全造成的阿！改成這個版本就中英文都ok啦！

完整處理方式如下：
1. 下載中英文字型都完整的DroidSansFallback，放在TCPDF資料夾中的fonts資料夾
2. 隨便做一張.php放在同一個fonts資料夾內，利用下列程式碼將DroidSansFallback.ttf轉成TCPDF可以用的TrueTypeUnicode字型：

<?php 
require_once('tcpdf.php'); 
$font = TCPDF_FONTS::addTTFfont('DroidSansFallback.ttf'); 
?>

3. 用網頁開啟這個.php檔開始轉檔，轉好之後會在fonts裡面產生三個檔案：droidsansfallback.php、droidsansfallback.ctg.z、droidsansfallback.z
這樣就能用DroidSansFallback字體輸出中英文阿拉伯數字都正常的.pdf檔了！

$pdf->SetFont('DroidSansFallback', '', 12, '', true);