[AJAX] jQuery plugin cascade 多重下拉選單應用 by json

最近在弄動態下拉式選單,因為層級的關係,所以必須用到,大學裡面各學院,底下在各系所,在網路上看到一篇 [AJAX] jQuery的多重下拉式選單應用 PART1,實做起來是不會困難,可是我遇到一些怪問題就是了,目前還沒有解決,當然首推 jQuery plugin 套件 cascade,那也參考了國外的一篇文章 jQuery.cascade : Cascading values from forms ,這幾篇看完其實就差不多了,因為大家都寫得很清楚,官方網站 更是把所有應用都寫出來了,詳細很多用法可以參考 官方網站,看原始碼大概就知道在寫甚麼了。 先來說明一下使用的方法:在這個 jQuery cascade plugin 裡面,定義了一格式:

/*
格式就在底下總共有三攔
*/
{'when':'selectedValue','value':'itemValue','text':'itemText'}
第一個 when:這是上一層的 select 的 value 值 第二個 value:這是下一層的 select 的 value 值 第三個 text:這是下一層 option 的 text 我想有一點 html 基礎的,大概就知道我在說什麼了吧

製作動態選單,可以用兩種方法,第一使用 ajax 去呼叫,也可以使用 json 的方式來達到,只是傳送的格式不同而已,第二個方法,就是在前端就輸出正確格式,然後利用 jQuery 讀近來。 先講解第一個方法:當然直接輸出就可以了,這就不必使用 ajax 去後端要資料了 首先把資料先撈出來:

sql_query($sql)) )
{
	die("Could not query config information" . $sql);
}
while($row = $db->sql_fetchrow($result)){
  /* 先把中文用 trim 輸出 */
  $row['dep_name'] = trim($row['dep_name']);
  $dep_array .= ($dep_array == '' ) ? "{'When':'".$row['college_id']."','Value':'".$row['dep_id']."','Text':'".$row['dep_name']."'}" : ", {'When':'".$row['college_id']."','Value':'".$row['dep_id']."','Text':'".$row['dep_name']."'}";
}
?>
注意輸出的部份:$dep_array 那邊,記得先用 trim 把中文的部份先使用,不然會顯示不出來,前端的寫法如下:
前端 html 部份:



這樣大致上就可以動了,那如果是要三層選單,那就自己再去加上 jQuery 的部份就可以了,舉一反三,我想大家都會,那底下介紹一下 ajax json 拿取得動態資料,這樣就不必先載入。 那首先修改 jQuery 寫法部份:
jQuery(document).ready(function()
{
  $("#user_department33").cascade("#user_college", {
  ajax: {
      url: 'ajax.php',
      type: 'GET',
      /*
			complete: function(){ 
				alert('my list is updated'); 
			},
      */      
      data: { 
        action: 'show', 
        /* 這裡一定要用 val 這個變數接上,下面有解說 */
        val: $('#user_college').val() 
      },
      dataType: "json"
  },
  template: commonTemplate,
  match: commonMatch
  
  });
  			
});
注意 datatype 那邊是寫 json,然後丟 GET 的 action 值過去,以及 select user_college 的 value,那 ajax.php 部份如下:
sql_query($sql)) )
    {
    	die("Could not query config information" . $sql);
    }
    $list = array();
    $dep_array = array();
    while($row = $db->sql_fetchrow($result))
    {
      $row['dep_name'] = trim($row['dep_name']);
      $row['college_id'] = trim($row['college_id']);
      $row['dep_id'] = trim($row['dep_id']);
      /* 如果不是用 json 方式,就必須用下面這程式碼 */
      //$dep_array .= ($dep_array == "" ) ? "[{'When':'".$row['college_id']."','Value':'".$row['dep_id']."','Text':'".$row['dep_name']."'}" : ",{'When':'".$row['college_id']."','Value':'".$row['dep_id']."','Text':'".$row['dep_name']."'}";
      /* json 專用格式 */
      $dep_array = array ('When' => $row['college_id'], 'Value' => $row['dep_id'], 'Text' => $row['dep_name']);
      $list[] = $dep_array;
    }    
  break;
}
echo json_encode($list);
?>

這樣大致上完成,可使有一個問題,不知道是我的問題,還是 jQuery plugin cascade,因為我用 ajax 這個方法,會讓選單,只出現一個,其他的都不會出現。 update 2008.12.21: 我發現哪裡出問題,原來在 jquery.cascade.ext.js 這檔案裡面,直接寫死的

$.ui.cascade.ext.ajax = function(opt) {				
		var ajax = opt.ajax;//ajax options hash...not just the url
		return { getList: function(parent) { 					
			var _ajax = {};
			var $this = $(this);//child element
			var defaultAjaxOptions = {
				type: "GET",
				dataType: "json",
				success: function(json) { $this.trigger("updateList", [json]); },
				data: $.extend(_ajax.data,ajax.data,{ val: opt.getParentValue(parent) })				
			};						
			//overwrite opt.ajax with required props (json,successcallback,data)		
			//this lets us still pass in handling the other ajax callbacks and options
			$.extend(_ajax,ajax,defaultAjaxOptions);	
			
			$.ajax(_ajax);		 		  
		} };
	};
裡面看到這一段:
/*
裡面已經用這個 val 變數去使用了,所以造成其他變數去連接會不對
*/
val: opt.getParentValue(parent)
網址測試:

http://appleboy.no-ip.org/plan/index.php


See also