项目里有这种需求,好多页面都有用到,所以干脆封装一个控件。
直接代码:
var my_Select = function (containner, data, changeFun, addUrl) {
if ($('#my_select_style').length < 1) {
$('head').append(
'<style id="my_select_style">'
+ ' .my_select {position:relative;width:150px;font-size:12px;}'
+ ' .my_select_txt {width:130px;height:30px;padding-right:20px;border:1px solid #999;}'
+ ' .my_select_btn {width:20px;height:28px;position:absolute;top:1px;right:1px;border:none;}'
+ ' .my_select_add {width:24px;height:24px;line-height:20px;border:none;border-radius:50%;background-color:#bbb;font-size:34px;color:#fff;position:absolute;top:4px;right:-32px;}'
+ ' .my_select_btn:after{content:"";display:block;position:absolute;top:13px;width:0;height:0;right:3px;border-right:5px solid transparent;border-top:5px solid #999;border-left:5px solid transparent;}'
+ ' .my_select_slt {border:1px solid #999;position:absolute;top:33px;left:0px;min-width:60%;display:none;}'
+ ' .my_select_opt {width:100%;overflow:hidden;}'
+ '</style>'
);
}
var slt = this,
frmDom = $('<div class="my_select"></div>').appendTo(containner),
btnDom = $('<div class="my_select_btn"></div>').appendTo(frmDom),
addDom = $('<div class="my_select_add">+</div>').appendTo(frmDom),
sltDom = $('<div class="my_select_slt"></div>').appendTo(frmDom),
txtDom = $('<input class="my_select_txt" type="text" />').appendTo(frmDom);
slt.value = '';
slt.text = '';
slt.changeCallback = changeFun;
slt.bindData = function (dt) {
sltDom.html('');
if (dt) {
for (var i = 0; i < dt.length; i++) {
var d = dt[i];
if (d.select) {
this.text = d.text;
this.value = d.value;
txtDom.val(d.text);
}
sltDom.append('<div class="my_select_opt" value="' + d.value + '">' + d.text + '</div>');
}
}
};
containner.on('click', function (e) {
e = e || window.event;
var t = e.srcElement || e.target, d = $(t), o = $(this);
$('.my_select_slt').hide();
if (d.hasClass('my_select_txt')) {
$('.my_select_opt').show();
o.find('.my_select_slt').show();
} else if (d.hasClass('my_select_btn')) {
$('.my_select_opt').show();
o.find('.my_select_slt').show();
} else if (d.hasClass('my_select_opt')) {
slt.text = $(t).html();
slt.value = $(t).attr('value');
o.find('.my_select_txt').val(slt.text);
slt.changeCallback(slt.value, slt.text);
} else if (d.hasClass('my_select_add')) {
slt.text = o.find('.my_select_txt').val(), exist = false, list = o.find('.my_select_opt');
list.each(function (i, item) {
if ($(item).html() == slt.text) {
exist = true;
return;
}
});
if (!exist) {
ajaxPost(addUrl, { 'text': text }, function (re) {
slt.value = re;
$('<div class="my_select_opt" value="' + slt.value + '">' + slt.text + '</div>').insertBefore(list.first());
list.show();
});
}
$('.my_select_opt').show();
o.find('.my_select_slt').show();
}
}).on('keyup', '.my_select_txt', function (e) {
var txt = $(this).val(), items = $(this).parent().find('.my_select_opt');
if (slt.text != txt) {
slt.text = '';
slt.value = '';
}
items.each(function (i, item) {
if ($(item).html().indexOf(txt) != -1) {
$(item).show();
} else {
$(item).hide();
}
});
})
slt.bindData(data);
};
$.fn.Load_my_Select = function (data, changeFun, addUrl) {
return new my_Select($(this), data, changeFun, addUrl);
};
//* 调用方法举例
var addUrl = '/Base/AddItem'; //添加条目调用的接口url
var dt = [
{ value: 1, text: 'test 1' },
{ value: 2, text: 'test 2', select: true },
{ value: 3, text: 'test 3' },
{ value: 4, text: 'test 4' }
];
var dt1 = [
{ value: 1, text: 'asdf 1' },
{ value: 2, text: 'asdf 2', select: true },
{ value: 3, text: 'asdf 3' },
{ value: 4, text: 'asdf 4' }
];
var sltObj = $('#frame').Load_my_Select(dt, function (value, text) {
alert('value:' + value + '|text:' + text);//这里是通过change事件的回调方法取值
}, addUrl);
var sltObj1 = $('#frame1').Load_my_Select(dt1, function (value, text) {
alert('value:' + value + '|text:' + text);//这里是通过change事件的回调方法取值
}, addUrl);
//下面是通过对象取值
var v = sltObj.value, t = sltObj.text;
//重新绑定数据
sltObj.bindData(dt1);
sltObj1.bindData(dt);