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 相关文章推荐
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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安装攻略:常见问题解答(一)
2006/10/09 PHP
使用数据库保存session的方法
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
jQuery 源码分析笔记
2011/05/25 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
浅谈Python的文件类型
2016/05/30 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
树莓派实现移动拍照
2019/06/22 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python中with用法讲解
2020/02/07 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
《梅兰芳学艺》教学反思
2014/02/24 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
Django如何与Ajax交互
2021/04/29 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
python lambda 表达式形式分析
2022/04/03 Python