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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
javascript自执行函数
2017/02/10 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Python编码爬坑指南(必看)
2016/06/10 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
电大自我鉴定
2013/10/27 职场文书
单位办理社保介绍信
2014/01/10 职场文书
认识深刻的检讨书
2014/02/16 职场文书
调研汇报材料范文
2014/08/17 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014年医院工作总结
2014/11/20 职场文书
八年级作文之友谊
2019/12/02 职场文书
golang语言指针操作
2022/04/14 Golang