jquery自定义下拉列表示例


Posted in Javascript onApril 25, 2014

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

jquery自定义下拉列表示例

看上去没怎么难吧,其实就是强化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();    
               })
Javascript 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
jquery常用特效方法使用示例
Apr 25 #Javascript
javascript实现存储hmtl字符串示例
Apr 25 #Javascript
javascript作用域和闭包使用详解
Apr 25 #Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 #Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 #Javascript
js动态移动滚动条至底部示例代码
Apr 24 #Javascript
javaScript如何处理从java后台返回的list
Apr 24 #Javascript
You might like
PHP安全上传图片的方法
2015/03/21 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Python应用库大全总结
2018/05/30 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python hash每次调用结果不同的原因
2019/11/21 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python交互模式基础知识点学习
2020/06/18 Python
python怎么删除缓存文件
2020/07/19 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
入党自我鉴定范文
2013/10/04 职场文书
公司离职证明范本
2014/01/13 职场文书
创建青年文明号材料
2014/05/09 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
无房证明范本
2014/09/17 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
python tkinter模块的简单使用
2021/04/07 Python