線上書籍

一、連動選單

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

二、基本引入檔

<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquerychained/jquery.chainedSelects.js"></script>

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

<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>

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

<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>

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

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

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

六、預設值寫法

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