jquery自定义下拉列表示例

自从上次做了jq自定义分页插件和表格插件后，就没在自定义过插件了，这一个月都在用linq和ef,基本前端都没怎么去碰了，今天有个同事说有个项目需要在下拉框里面带有复选框，本来想网上找下插件的，一想，其实这功能也并不难，于是就自己做了一个，也趁机再次熟悉下jq自定义插件吧，好了，先附上效果图先：

看上去没怎么难吧，其实就是强化jq，免得太久没用，生疏了。好了。附上我的代码：

(function($){

 var option={
     isedit:false,  //是否可以编辑:默认是否
     listheight:200,  //下拉框高度
     listwidth:0,     //下拉框长度
     //数据源
     data:[
           {"value":1,"text":"选择1"},
           {"value":2,"text":"选择2"},
           {"value":3,"text":"选择3"},
           {"value":4,"text":"选择4"}
           ]
     }
           //开始创建下拉框
          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);
            //默认位置是在创建元素的下方
           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);
          }
          // 当获取到焦点使出现该下拉框
          function foucsshow(obj,mylist)
          {
              obj.focus(function(){mylist.show()})
          }
          $.fn.createlist=function(newoption)
          {
              $.extend(option,newoption);
             start($(this));

          }
          })(jquery);

前台调用：

$("#d2").createlist({
     //数据源
     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();   
               })