首先是ajax填充外掛程式FillOptions,這個外掛程式可以通過ajax方法擷取資料並把資料添加到下拉式清單方塊,資料格式支援xml格式和json格式,外掛程式定義如下
FillOptions(url,options)
參數說明
url:ajax請求的地址,必須 options包括如下參數
datatype:ajax請求返回的資料格式,可以是"xml”或"json”,預設為"json”
textfield:ajax請求返回的資料中下拉式清單方塊選項文本的欄位,預設為"text”
valuefiled:ajax請求返回的資料中下拉式清單方塊選項值的欄位,預設為"value”
keepold:布爾類型,是否保留下拉式清單方塊選項原有選項,預設為不保留
selected:數值型,填充選項後第幾項為選中狀態,預設為0
執行個體如下: $("#Select1").FillOptions("handler1.ashx?type=json",{datatype:"json",textfield:"province",valuefiled:"provinceID"});
執行個體說明:Select1是頁面上一個下拉式清單方塊,通過訪問"handler1.ashx?type=json"這個地址,返回“[{"provinceID":"110000","province":"北京市"},{"provinceID":"120000","province":"天津市"}]”這樣格式的資料,然後通過指定的textfield和valuefiled參數,產生下拉式清單方塊的option並添加到Select1。更多例子可以看下載中的test.htm
下拉式清單方塊聯動外掛程式CascadingSelect,這個外掛程式是基於上面FillOptions外掛程式製作的,可以實現兩個下拉式清單方塊的聯動,定義如下:
CascadingSelect(target,url,options,endfn)
參數說明:
target:需要聯動的下拉式清單方塊,必須
url:ajax請求的地址,必須 options與FillOptions的類似,增加了一個參數
parameter:ajax請求時傳回值的參數名,必須
endfn:類型是function,完成聯動後執行
執行個體如下:
$("#Select1").CascadingSelect(
$("#Select2"),
"handler1.ashx?type=json",
{datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},
function(){
$("#Select2").AddOption("請選擇","-1",true,0);
$("#Select3").html("");
$("#Select3").AddOption("無選項","-1",true,0);
}
);
執行個體說明:Select1,Select2,Select3都是頁面上的下拉式清單方塊,通過設定parameter:”p”這個參數會產生一個"handler1.ashx?p=xxx&type=json”這樣的地址來做ajax請求,xxx為select1所選擇的值,返回後使用FillOptions來填充Select2的option。具體執行個體請看test1.htm中實現的省市區的三級聯動。
添加一個清單項目的外掛程式AddOption,這個比較簡單,用來向下拉式清單方塊中添加一個清單項目。定義如下:
AddOption (text,value,selected,index)
參數說明:
text:文本型,清單項目文本
value:文本型,清單項目值
selected:布爾型,是否選擇加入的清單項目 index:數值型,加入位置
執行個體如下: $("#Select2").AddOption("請選擇","-1",true,0);
執行個體說明:向select2最上端插入一個文本為“請選擇“,值為”-1“的清單項目,並且是選中狀態
http://bbs.jquery.org.cn/viewthread.php?tid=637&extra=page%3D1或者是http://download.csdn.net/user/luq885
。