首先是ajax填充插件FillOptions，這個(gè)插件可以通過(guò)ajax方法獲取數(shù)據(jù)并把數(shù)據(jù)添加到下拉列表框，數(shù)據(jù)格式支持xml格式和json格式，插件定義如下

FillOptions(url,options)

參數(shù)說(shuō)明

url：ajax請(qǐng)求的地址，必須

options包括如下參數(shù)

datatype：ajax請(qǐng)求返回的數(shù)據(jù)格式,可以是”xml”或”json”，默認(rèn)為”json”

textfield：ajax請(qǐng)求返回的數(shù)據(jù)中下拉列表框選項(xiàng)文本的字段，默認(rèn)為”text”

valuefiled：ajax請(qǐng)求返回的數(shù)據(jù)中下拉列表框選項(xiàng)值的字段，默認(rèn)為”value”

keepold：布爾類型，是否保留下拉列表框選項(xiàng)原有選項(xiàng)，默認(rèn)為不保留

selected：數(shù)值型，填充選項(xiàng)后第幾項(xiàng)為選中狀態(tài)，默認(rèn)為0

實(shí)例如下：

$("#Select1").FillOptions("handler1.ashx?type=json",{datatype:"json",textfield:"province",valuefiled:"provinceID"});

實(shí)例說(shuō)明：

Select1是頁(yè)面上一個(gè)下拉列表框，通過(guò)訪問(wèn)"handler1.ashx?type=json"這個(gè)地址，返回“[{"provinceID":"110000","province":"北京市"},{"provinceID":"120000","province":"天津市"}]”這樣格式的數(shù)據(jù)，然后通過(guò)指定的textfield和valuefiled參數(shù)，生成下拉列表框的option并添加到Select1。更多例子可以看下載中的test.htm 下拉列表框聯(lián)動(dòng)插件CascadingSelect，這個(gè)插件是基于上面FillOptions插件制作的，可以實(shí)現(xiàn)兩個(gè)下拉列表框的聯(lián)動(dòng)，定義如下： CascadingSelect(target,url,options,endfn)參數(shù)說(shuō)明： target:需要聯(lián)動(dòng)的下拉列表框，必須 url：ajax請(qǐng)求的地址，必須 options與FillOptions的類似，增加了一個(gè)參數(shù) parameter：ajax請(qǐng)求時(shí)傳回值的參數(shù)名，必須 endfn：類型是function，完成聯(lián)動(dòng)后執(zhí)行實(shí)例如下： $("#Select1").CascadingSelect(

$("#Select2"),

"handler1.ashx?type=json",

{datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},

function(){

$("#Select2").AddOption("請(qǐng)選擇","-1",true,0);

$("#Select3").html("");

$("#Select3").AddOption("無(wú)選項(xiàng)","-1",true,0);

}

);

實(shí)例說(shuō)明：Select1,Select2,Select3都是頁(yè)面上的下拉列表框，通過(guò)設(shè)置parameter:”p”這個(gè)參數(shù)會(huì)生成一個(gè)"handler1.ashx?p=xxx&type=json”這樣的地址來(lái)做ajax請(qǐng)求，xxx為select1所選擇的值，返回后使用FillOptions來(lái)填充Select2的option。具體實(shí)例請(qǐng)看test1.htm中實(shí)現(xiàn)的省市區(qū)的三級(jí)聯(lián)動(dòng)。 添加一個(gè)列表項(xiàng)的插件AddOption，這個(gè)比較簡(jiǎn)單，用來(lái)向下拉列表框中添加一個(gè)列表項(xiàng)。定義如下： AddOption (text,value,selected,index)參數(shù)說(shuō)明： text：文本型，列表項(xiàng)文本 value：文本型，列表項(xiàng)值 selected：布爾型，是否選擇加入的列表項(xiàng) index：數(shù)值型，加入位置 實(shí)例如下： $("#Select2").AddOption("請(qǐng)選擇","-1",true,0);

實(shí)例說(shuō)明：向select2最上端插入一個(gè)文本為“請(qǐng)選擇“，值為”-1“的列表項(xiàng)