SoFunction
Updated on 2025-02-28

jquery custom drop-down list example


(function($){

 var option={
isEdit:false, //Is it possible to edit: default
Listeight:200, //Pull down box height
ListWidth:0, //Length of pull-down box
//Data source
     data:[
{"value":1,"text":"select 1"},
{"value":2,"text":"select 2"},
{"value":3,"text":"select 3"},
{"value":4,"text":"Select 4"}
           ]
     }
//Start create drop-down boxes
          function Start(obj)
          {
              if(!)
              {
              ({"readonly":"readonly"});
              }
            var      myList=$("<div></div>");
            var  ul=$("<ul></ul>");
           ({"list-style":"none","margin":"0px","padding":"2px"});
           ({"border":"1px solid #D9E5F3","position":"absolute","overflow-y":"scroll","background-color":"#fff","font-size":"12px"});
           if(<=0)
           {
               =200;
            }
           ();
           if(<=0)
           {
             =()
           }
              ();
//The default position is below the created element
           ({"top":().top+(),"left":().left});
           var data=;

           if(>0)
           {
          for(i=0;i<;i++)
          {
             var li=$("<li/>");
              var ListSon=$("<input type='checkbox' />");
             (function(){
                    if()   
                    {
                        (()+$(this).val());
                    }
                    else
                    {
                        (().replace($(this).val(),""));
                    }
                     })
              (function(){
                            ();          
                        })
             (function(){
                            ();          
                        })
             var span=$("<span></span>");
             (data[i].text);
               (data[i].value+";");
              (ListSon);
             (span);
             (li);
          }
           }
             (ul);
               ("body");
             ();

            FoucsShow($(obj),myList);
          }
// When the focus is obtained, the drop-down box appears
          function FoucsShow(obj,myList)
          {
              (function(){()})
          }
          $.=function(newoption)
          {
              $.extend(option,newoption);
             Start($(this));

          }
          })(jQuery);