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

:::