jQuery - cascade多重關聯式選單

最常用到的就是地址，通常地址包括了縣市、鄉鎮，所以會有兩個關聯式的下拉式選單
其實本來是要自己寫javascript，但是因為配合的PHP & Smarty，還真是給他不好處理
所以決定上網找一個jQuery來使用，於是找到了這個相關資料，趕快來記錄一下，免的下一秒就忘了^^"
這裡是官網  這裡是範例
依照他的範例，頁面上需要置放一些code，首先是把相關的jQuery套件放進來： <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script> <script type="text/javascript" src="jquery.cascade.js"></script> <script type="text/javascript" src="jquery.cascade.ext.js"></script> <script type="text/javascript" src="jquery.templating.js"></script> 再來是設定option2的javascript <script type="text/javascript"> var list1 = [ {'When':'A','Value':'A1','Text':'A1'}, {'When':'A','Value':'A2','Text':'A2'}, {'When':'A','Value':'A3','Text':'A3'}, {'When':'A','Value':'A4','Text':'A4'}, {'When':'B','Value':'B1','Text':'B1'}, {'When':'B','Value':'B2','Text':'B2'}, {'When':'B','Value':'B3','Text':'B3'}, {'When':'B','Value':'B4','Text':'B4'}, {'When':'C','Value':'C1','Text':'C1'}, {'When':'C','Value':'C2','Text':'C2'}, {'When':'D','Value':'D1','Text':'D1'}, {'When':'D','Value':'D2','Text':'D2'} ]; function commonTemplate(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonTemplate2(item) { return "<option value='" + item.Value + "'>***" + item.Text + "***</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; }; </script> HTML code Parent <select id="simple"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> Child <select id="simple_child"> <option value='nope1'>I am not deleted on ready()</option> <option value='nope2'>Neither Am I</option> </select> jQuery code <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#simple_child").cascade("#simple",{ list: list1, template: commonTemplate, match: commonMatch }); }); </script> 這裡我只是用第一個範例來舉例說明，範例網站還有許多用法可以參考