Tad 教材網 - 線上書籍

[991]PHP網站開發 進階應用技巧2
====================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9901/03.zip)

### 一、連動選單

1.<http://www.codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/>  
 2.簡單易用，不限幾層，選項調整方便，適用在程式必須抓到每一欄（層）的值，而且欄位之間有一定關係。

### 二、基本引入檔

### 三、網頁部份（以三層為例）

<span style="color: rgb(51, 102, 255);"><form  method="post" action="送出位址">  
     <select id="car" name="car">  
     <option value="">請選擇廠牌</option>  
     <option value="福特">福特</option>  
     <option value="日產">日產</option>  
     </select>  
     <select name="style" id="style" style="display:none"></select>  
     <select name="color" id="color" style="display:none"></select>  
 </form></span>

### 四、JS部份（以三層為例）

<span style="color: rgb(51, 102, 255);"><script language="JavaScript" type="text/javascript">  
 $(function(){  
     $('#car').chainSelect('#style','jquerychained/combobox.php',{  
         before:function (target){$(target).css("display","none");},  
         after:function (target){$(target).css("display","inline");}  
     });  
     $('#style').chainSelect('#color','jquerychained/combobox.php',    {  
         before:function (target) {$(target).css("display","none");},  
         after:function (target) {$(target).css("display","inline");}  
     });  
 });  
 </script></span>

### 五、combobox.php內容（子選項設定頁）

1.$\_GET['\_name'] 為下拉欄位的name。  
 2.$\_GET['\_value'] 為下拉欄位值。  
 3.json\_encode()於PHP5.2以後才支援，若PHP較舊，可用json\_encode.php中的自製json\_encode()。

<span style="color: rgb(51, 102, 255);"><?php  
 $array = array();  
 switch($\_GET['\_name']){  
     case "car":  
         if ($\_GET['\_value'] == '福特'){  
             $array[] = array('' => '選擇型號');  
             $array[] = array('Mondeo' => 'Mondeo');  
             $array[] = array('Focus' => 'Focus');  
         }elseif ($\_GET['\_value'] == '日產'){  
             $array[] = array('' => '選擇型號',TIIDA' => 'TIIDA','TEANA' => 'TEANA');  
         }else{  
             $array[] = array('' => '尚未選擇廠牌');  
         }  
     break;  
   
     case "style":  
         if($\_GET['\_value'] == 'Mondeo'){  
             $array[] = array('' => '選擇顏色');  
             $array[] = array('鈦合金灰' => '鈦合金灰');  
             /\*.....略......\*/  
         }elseif($\_GET['\_value'] == 'Focus'){  
             $array[] = array('' => '選擇顏色');  
             $array[] = array('綠竹銀' => '綠竹銀');  
             /\*.....略......\*/  
         }else{  
             $array[] = array('' => '尚未選擇車型');  
         }  
     break;  
 }  
 echo json\_encode( $array );  
 ?></span>

### 六、預設值寫法

1.第一層，直接在<option>中加上selected  
 2.第二層以後，在JS部份加上第三個參數defaultValue（before、after屬於一、二參數），並指定其值  
 3.接著在最後面加上change()，如：  
 $('#car').chainSelect('#style', 'combobox.php',{  
   before:function (...){...},  
   after:function (...){...},  
   defaultValue: 'YARIS'  
 }).change();

### 七、關於 jquery.chainedSelects.js

1.若選項文字和值是相同的，可用 jquery.chainedSelects2.js  
 2.若選項文字和值可能不同，請用 jquery.chainedSelects.js

:::