自己写的select

由于项目中下拉框的list比较长 显的不好看,于是自己写了一个select 时间关系 写的不是很规范;都是使用的内嵌样式,可以自己调整select的高度

调用方式:只需要把 装有select的 父标签(如div,form,里面装有多个select)id传入 changeselect(id) 即可 [color=red]changeselect('divid')[/color]
代码:


var ly_select_currtren=null; //存放当前操作的下拉框
var ly_input_currtren=null; //存放当前操作的 input
function changeselect(id){
$('#'+id).find('select').each(function(i){
var csel = $(this);
var top = isExplorer(ExplorerType.MSIE)?'absmiddle':'top';
var inp = $('<input readonly id="'+id+i+'" type="text" />').prependTo(csel.parent());
var ini = $('<img align="'+top+'" style="cursor:pointer;" alt="" src="cnznjt_images/arrowxl.png" />');
inp.after(ini);
inp.width(csel.width()-17).val(csel.find('option:first').text());

if(csel[0].className.indexOf('validate') != -1)
inp.addClass('validate[custom[isnull]'); //这里是为了培训项目中的验证框架 要不要无所谓

csel.hide();
inp[0].onclick=hand;
ini[0].onclick=hand;
var options = csel.find('option');
var w = csel.width();
var h = 150;


function hand(event){
ly_select_currtren = csel;
ly_input_currtren = inp;

$('.selectdiv').remove();
var pos = GetObjPos(inp[0]);
var jid1 = $('<div id="id1" class="selectdiv" style="width:300px;height:98px;border:#7F9DB9 1px solid;z-index:202;position:absolute;background:#ffffff;overflow-y:scroll;"></div>').appendTo('body');
var str = '';
options.each(function(){ //获取原来select中的option 放到div中模拟select下拉列表
str += '<div myid="'+this.value+'" onclick="clickhand(this)" onmouseout="this.style.backgroundColor=\'\';this.style.color=\'\'" onmouseover="this.style.backgroundColor=\'blue\';this.style.color=\'white\'" style="overflow:hidden;white-space:nowrap;heigth:20px;cursor:pointer;width:'+(w-20)+'px;margin-top:1px;" title="'+$(this).text()+'">'+$(this).text()+'</div>';

});
jid1.css('left',pos.x).css('top',pos.y+22).width(w).height(h).html(str);
stopBubble(event);
document.onmousedown=function(){
jid1.remove();
      document.onmousedown=null; 
}
jid1[0].onmousedown=function(event){
//只阻止了向上冒泡,而没有阻止向下捕获,所以点击con的内部对象时,仍然可以执行这个函数
stopBubble(event);
}
return false;

}
function bb(d){
alert(d.className)
csel.val(d.className);
$('.selectdiv').remove();
}
});
}
function clickhand(d){
$('.selectdiv').remove();
ly_select_currtren.val(d.getAttribute('myid'));
ly_input_currtren.val(d.innerHTML);
ly_input_currtren[0].focus();
ly_input_currtren[0].blur();
if(ly_select_currtren[0].onchange)
ly_select_currtren[0].onchange();

}
function CPos(x, y){
this.x = x+1;
this.y = y;
}
function GetObjPos(ATarget){ //获取坐标
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);

var target = target.offsetParent;
while (target)
{
pos.x += target.offsetLeft;
pos.y += target.offsetTop;

target = target.offsetParent
}

return pos;
}
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation(); //w3c
}else{
window.event.cancelBubble=true; //IE
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值