Jquery custom drop down list example

Since the last made JQ custom paging and form the plugin, is never in a custom plug-in, this month are using linq and ef, basic front didn't how to touch, a colleague said today there is a project need to be in the drop-down box with a check box, wanted to find the online plug-in, a thought, in fact this function also is not difficult, so he do it himself a and also the chance to once again under the familiar JQ custom plug-in, good, the first enclosed rendering first:

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/20140425113146.jpg? 2014325113340 ">

It doesn't look too hard, but it's just to strengthen JQ, so it won't be useless for too long. Ok. Attached is my code:

(function($){

 var option={
     isEdit:false,  //Whether to edit: default whether
     Listheight:200,  //Drop-down box height
     ListWidth:0,     //Drop-down box length
     //The data source
     data:[
           {"value":1,"text":" choose 1"},
           {"value":2,"text":" choose 2"},
           {"value":3,"text":" choose 3"},
           {"value":4,"text":" choose 4"}
           ]
     }
           //Start creating a drop-down box
          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);
            //The default position is below the created element
           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);
          }
          //Causes the drop-down box to appear when getting focus
          function FoucsShow(obj,myList)
          {
              obj.focus(function(){myList.show()})
          }
          $.fn.createList=function(newoption)
          {
              $.extend(option,newoption);
             Start($(this));

          }
          })(jQuery);

Foreground call:

$("#d2").createList({
     //The data source
     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();    
               })