首页 > 代码库 > jq插件又来了，模拟select下拉框，支持上下方向键哦
jq插件又来了，模拟select下拉框，支持上下方向键哦
好久没来了，更新下插件，
这个原理就是利用的 input[type=‘hidden‘]和自定义属性data-value捆绑传值操作的，可是设置默认选项，回调等参数，代码不多，比较简单，吼吼
(function($){ //模拟下拉框 $.fn.htmlSelect = function(opt){ if($(this).length==0) return false; var opts = $.extend({ defaultsItem : 0, //默认选中的select项 saveInput : ‘<input type= "hidden" />‘, showSelect : ‘.show‘, callback : function(){} //选择完毕后触发回调 },opt); function SimulateSelect(o){ this.o = o; this.defaultsItem = opts[‘defaultsItem‘]; this.saveInput = opts[‘saveInput‘]; this.callback = opts[‘callback‘]; this.showSelect = this.o.find(opts[‘showSelect‘]); this.hideInp = null; this.selList = this.o.find(‘ul‘); this.curItem = this. defaultsItem; //当前选中 } SimulateSelect.prototype = { init : function(){ var _this = this; _this.creatInput().changeValue().toogleSelList().keyboard(); $(document).on("click", function() { //点击文档空白处 下拉框消失 if(_this.o.hasClass("open")){ _this.closeSelect(_this.o); } }); return this; }, creatInput : function(){ var _this = this; if($.type(_this.saveInput) == "string"){ //判断若参数为jq对象，则直接指向这个input对象，若为字符串，则插入dom this.o.append(_this.saveInput); _this.hideInp = this.o.find(‘input:hidden‘); }else{ _this.hideInp = _this.saveInput } if($.type(_this.defaultsItem) == ‘number‘){ _this.curItem = _this.selList.find(‘li‘).eq(_this.defaultsItem); } return this; }, changeValue : function(){ var _this = this; _this.curItem.addClass(‘selected‘).siblings().removeClass(); var v = _this.curItem.attr(‘date-value‘),s = _this.curItem.html(); _this.showSelect.html(s); _this.hideInp.val(v); return this; }, toogleSelList : function(){ //展开收起列表 var _this = this; this.o.on(‘click‘,function(e){ if($(this).hasClass("open")){ _this.closeSelect($(this)); }else{ $(this).addClass(‘open‘); _this.selList.show(); } var src = http://www.mamicode.com/e.target,s = ‘‘;"li"){ s = src.innerHTML; _this.showSelect.html(s); $(src).addClass(‘selected‘).siblings().removeClass(); var v = $(src).attr("date-value"); _this.hideInp.val(v); _this.curItem = $(src); if(_this.callback){ _this.callback(v); } } e.stopPropagation(); }) return this; }, closeSelect : function(obj){ this.selList.hide(); obj.removeClass(‘open‘); return this; }, keyboard : function(){ //注册键盘事件 var _this = this; $(‘body‘).on(‘keydown‘,function(e){ //这块要用body，不然不兼容ie7,8 switch(e.keyCode) { case 38: _this.prevItem(); break; case 40: _this.nextItem(); break; defaults: return; } }) }, prevItem :function(){ var _this = this; if(_this.o.hasClass(‘open‘)){ if(_this.curItem.prev().length > 0){ _this.curItem = _this.curItem.prev(); _this.changeValue(); } } return this; }, nextItem :function(){ var _this = this; if(_this.o.hasClass(‘open‘)){ if(_this.curItem.next().length > 0){ _this.curItem = _this.curItem.next(); _this.changeValue(); } } return this; } } return this.each(function () { var $this = $(this); var obj = new SimulateSelect($this); obj.init() }); }})(jQuery)css
.select{ position: relative; padding-right: 20px; }.select .ico2{position: absolute; display: block; right: 0; top:10px;cursor: pointer;}.select .show{color:#333333; height: 40px; line-height: 40px; min-width: 80px;*margin-top:-10px; text-align: center; font-size: 14px; display: block;padding-left: 10px; cursor: pointer;}.dropList{ max-height: 510px; overflow: auto; position: absolute; top:40px; width: 100%; left: -1px; background: #FFF; z-index: 99; padding-top: 5px; padding-bottom: 2px; display: none;}.dropList li{ line-height: 30px;margin:0 3px; padding-left: 10px; cursor: pointer;}.dropList li:hover{color:#333;}.dropList li.selected{background: #b9b9b9; color:#FFF;}调用
$(function(){ $(‘#phone‘).htmlSelect({ callback:function(i){ } //i为当前选中的 data-value的值 })})
jq插件又来了，模拟select下拉框，支持上下方向键哦
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。