2. 連動選單

一、 環境設定

1. 使用jQuery中的.post()需要php，因此，需要在伺服器中運作。
2. 請安裝XOOPS 2.5.5（http://120.115.2.90 Linux 基礎版程式包）
3. 安裝contact通訊錄模組，本學期會以此模組為範例。

二、 引入TadTools工具
 

if(!file_exists(XOOPS_ROOT_PATH."/modules/tadtools/tad_function.php")){
 redirect_header("http://www.tad0616.net/modules/tad_uploader/index.php?of_cat_sn=50",3, "需要 tadtools 模組，可至<a href='http://www.tad0616.net/modules/tad_uploader/index.php?of_cat_sn=50' target='_blank'>Tad教材網</a>下載。");
}
include_once XOOPS_ROOT_PATH."/modules/tadtools/tad_function.php";

三、 TadTools中呼叫jquery

1. $jquery=get_jquery($ui=false,$mode="local",$theme='base');
2. $ui：是否引入jquery ui
3. $mode：引入方式，其值有：none（不引入jquery）、google（使用Google的jquery）、local（引入TadTools中的jquery）
4. $theme：ui使用的佈景，有base和ui-lightness兩種。

四、 何謂連動選單？

1. 使用者選取A選單，B選單位根據A選單的值，自動產生相關選項。例如縣市選單，選擇「台南市」之後，第二個選單可能會出現「永康區、新營區...等」；若選擇「新北市」第二個選單則出現「淡水區、八里區...等」。
2. 換言之，我們必須能知道選單A何時異動了→$("#A").change()
3. 使用者選了A選單的什麼值→$("#A").val()
4. 然後，將A選單的值送給程式去運算→$.post()
5. 最後，把運算的結果，塞回選單B→$('#B').html(data);

五、 jQuery的.post()與.get()
 

  $(document).ready(function(){
    $.post('ajax.php',  {op: 'get_menu' , menu1: '台南市'} , function(data) {
      $('#menu2').html(data);
    });
  });

1. ajax.php：背後運算的程式
2. {op: 'get_menu' , menu1: '台南市'}：帶參數給ajax.php，ajax.php會接收到「$_POST['op']="get_menu"」及「$_POST['menu1']="台南市"」兩個值。
3. 若是要傳送陣列：{ 'county[]': ["台南市", "新北市"] }
4. function(data) {}：就是把menu.php的運算結果「data」套用到某些動作中。
5. $('#menu2').html(data)：把運算結果「data」放入id="menu2"的網頁元件中。

六、 jQuery的.change ()事件
 

$('#menu1').change(function(){
  //當id="menu1"的網頁元件有變動時，要做些什麼事
});

七、 jQuery的.val ()方法

1. $('#menu1').val()可以取得id="menu1"的網頁元件的值。
2. $('#menu1').val('xxx')可以設定id="menu1"的網頁元件的值。