自製的操作下拉式清單方塊(SELECT)的三個jquery外掛程式(ajax填充、聯動、增加選項)

來源:互聯網
上載者:User
    首先是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


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.