jquery custom drop-down list example_form effects

Since I made the JQ custom paging plug-in and table plug-in last time, I haven’t customized the plug-in. I have been using linq and ef this month, and I haven’t touched the basic front-end. Today I have a colleague It was said that there was a project that required a checkbox in the drop-down box. I originally wanted to find a plug-in online, but after thinking about it, this function is actually not difficult, so I made one myself and took the opportunity to familiarize myself with the JQ custom plug-in again. Okay, okay, let’s attach the renderings first:

It doesn’t look that difficult, but it’s actually about strengthening your JQ so that it won’t become rusty if it’s not used for too long. alright. Attached is my code:

Copy code The code is as follows:

(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=$("

");
            var  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          {
             var li=$("

");
              var ListSon=$("");
             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.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);
}
              // when Get the focus so that the drop-down box appears
function FoucsShow(obj,myList)
.fn .createList=function(newoption)
                                                                              })(jQuery);



Foreground call:

Copy code

The code is as follows:

$("#d2").createList({ //Data source data:[ {"value":"C#","text":"C#"}, {"value":".NET","text": ".NET"}, {"value":"Java","text":"Java"},

{"value":"JSP","text":"JSP"},

            {"value": "C", "text": "C"},
                                                                                                                                                                                                                ","text":"javascript"},
                                                                                                                                                                     "},
                                                                                                                                                {"value":"xml","text":"Mysql"},
                                                                                                        ,"text":"JQuery"},
                                                                                                                                                            CSS3"},
                                                                                                                                                     🎜>            })