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

");
            var  ul=$("

");
         padding":"2px"});
           myList.css({"border":"1pxsolid #D9E5F3","position":"absolute","overflow-y":"scroll"" "#fff","font-size":"12px"});
           if(option.Listheight    option.Listheight=200;
            }
myList .height(option.Listheight);
          ()
           }
             時的清單寬度 (選購寬度。 ListWidth);
            // 預設位置在建立元素的下方
           myList.offset({"topf:obj.左});
           vardata=option.data;

                 for(i=0;i          {
             var li=$("

");             ListSon.change(function () {
                   作用中if(this.checked)   
                   obj.val(obj.val() $(this).val());
                  其他
                     {
                      >                    })
             myList.show();          
                      })
                           myList.hide();          
    )
             var span=$("");
             ListSon.val(data[i].value "; ");
              li.append(ListSon);
           );
          }
           }
       ;
               myList.appendTo("body");
          sShow($(obj),myList);
          }
          // 當所擷取到焦點讓出現此下拉方塊
          function FoucsShow(obj,myList)
         )
          }
          $.fn.createList =function(newoption)
          {
             . >
          }
          })(jQuery);



前台呼叫：

複製程式碼

程式碼如下:

$("#d2").createList({     //數據源     data:[           {"value":"C#","text":"C#"},           {"value":".NET","text": ".NET"},

           {"value":"Java","text":"Java"},

         >           {"value":"C","text":"C"},
           {"value":C ","text":      ","text":"javascript"},
           {"value":"ajax","text":"ajax"},
     "},
           {"value":"xml","text":"xml"},
        ,   { {"value":"xml","text":"Mysql"},
           {"value":"oracle","text":"oracle"},           {"value":"Ext js","text":"Ext js"},
   CSS3"},
           {"value":"HTML5","text":"HTML5"}
                    $("#d3").createList();   
               })