AjAx下拉列表框(SELECT)jquery插件

首先是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“的列表項

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章