好久没来了,更新下插件,
这个原理就是利用的 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 = e.target,s = '';
if(src.tagName.toLowerCase() == "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;}
html:
<div class="select ">
<span class='show'>中国(+86)</span>
<ul class="dropList bd">
<li class='selected' date-value = '0'>中国(+86)</li>
<li date-value = '11'>美国(+1)</li>
<li date-value = '3'>澳大利亚(+61)</li>
<li date-value = '4'>台湾(+668)</li>
<li date-value = '5'>美国(+1))</li>
</ul>
</div>
调用
$(function(){
$('#phone').htmlSelect({
callback:function(i){ } //i为当前选中的 data-value的值
})
})