快捷導(dǎo)航

jquery自定義下拉列表示例

更新時(shí)間：2014年04月25日 11:32:52 作者：

這篇文章主要介紹了jquery自定義下拉列表示例,需要的朋友可以參考下

自從上次做了JQ自定義分頁(yè)插件和表格插件后，就沒(méi)在自定義過(guò)插件了，這一個(gè)月都在用linq和ef,基本前端都沒(méi)怎么去碰了，今天有個(gè)同事說(shuō)有個(gè)項(xiàng)目需要在下拉框里面帶有復(fù)選框，本來(lái)想網(wǎng)上找下插件的，一想，其實(shí)這功能也并不難，于是就自己做了一個(gè)，也趁機(jī)再次熟悉下JQ自定義插件吧，好了，先附上效果圖先：

看上去沒(méi)怎么難吧，其實(shí)就是強(qiáng)化JQ，免得太久沒(méi)用，生疏了。好了。附上我的代碼：

復(fù)制代碼代碼如下:

(function($){

 var option={
     isEdit:false,  //是否可以編輯:默認(rèn)是否
     Listheight:200,  //下拉框高度
     ListWidth:0,     //下拉框長(zhǎng)度
     //數(shù)據(jù)源
     data:[
           {"value":1,"text":"選擇1"},
           {"value":2,"text":"選擇2"},
           {"value":3,"text":"選擇3"},
           {"value":4,"text":"選擇4"}
           ]
     }
           //開(kāi)始創(chuàng)建下拉框
          function Start(obj)
          {
              if(!option.isEdit)
              {
              obj.attr({"readonly":"readonly"});
              }
            var      myList=$("<div></div>");
            var  ul=$("<ul></ul>");
           ul.css({"list-style":"none","margin":"0px","padding":"2px"});
           myList.css({"border":"1px solid #D9E5F3","position":"absolute","overflow-y":"scroll","background-color":"#fff","font-size":"12px"});
           if(option.Listheight<=0)
           {
               option.Listheight=200;
            }
           myList.height(option.Listheight);
           if(option.ListWidth<=0)
           {
             option.ListWidth=obj.width()
           }
              myList.width(option.ListWidth);
            //默認(rèn)位置是在創(chuàng)建元素的下方
           myList.offset({"top":obj.offset().top+obj.outerHeight(),"left":obj.offset().left});
           var data=option.data;

           if(data.length>0)
           {
          for(i=0;i<data.length;i++)
          {
             var li=$("<li/>");
              var ListSon=$("<input type='checkbox' />");
             ListSon.change(function(){
                    if(this.checked)    
                    {
                        obj.val(obj.val()+$(this).val());
                    }
                    else
                    {
                        obj.val(obj.val().replace($(this).val(),""));
                    }
                     })
              myList.mouseover(function(){
                            myList.show();           
                        })
             myList.mouseout(function(){
                            myList.hide();           
                        })
             var span=$("<span></span>");
             span.text(data[i].text);
               ListSon.val(data[i].value+";");
              li.append(ListSon);
             li.append(span);
             ul.append(li);
          }
           }
             myList.append(ul);
               myList.appendTo("body");
             myList.hide();

            FoucsShow($(obj),myList);
          }
          // 當(dāng)獲取到焦點(diǎn)使出現(xiàn)該下拉框
          function FoucsShow(obj,myList)
          {
              obj.focus(function(){myList.show()})
          }
          $.fn.createList=function(newoption)
          {
              $.extend(option,newoption);
             Start($(this));

          }
          })(jQuery);

前臺(tái)調(diào)用：

復(fù)制代碼代碼如下:

$("#d2").createList({
     //數(shù)據(jù)源
     data:[
           {"value":"C#","text":"C#"},
           {"value":".NET","text":".NET"},
           {"value":"Java","text":"Java"},
           {"value":"JSP","text":"JSP"},
           {"value":"C","text":"C"},
           {"value":"C++","text":"C++"},
           {"value":"javascript","text":"javascript"},
           {"value":"ajax","text":"ajax"},
           {"value":"json","text":"json"},
           {"value":"xml","text":"xml"},
           {"value":"sql server","text":"sql server"},
           {"value":"xml","text":"Mysql"},
           {"value":"oracle","text":"oracle"},
           {"value":"JQuery","text":"JQuery"},
           {"value":"Ext js","text":"Ext js"},
           {"value":"CSS3","text":"CSS3"},
           {"value":"HTML5","text":"HTML5"}
           ]    
            });
            $("#d3").createList();    
               })