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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
js实现随机点名小功能
Aug 17 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php图片缩放实现方法
2014/02/20 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
深入了解Django中间件及其方法
2019/07/26 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
教师考核材料
2014/05/21 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js