js 自定义个性下拉选择框示例_javascript技巧

复制代码 代码如下: statistics test .dropdiv{ width: 177px; height: 16px; overflow: hidden; float: left; font-size: 13px; font-family: "微软雅黑"; position: relative; padding: 5px; } .drpdown{ width: 214px; height: 24px; font-size: 13px; font-family:"微软雅黑"; position: relative; border:none; padding-top:4px; background:url(../images/dropdown.png) repeat-x; } .drpdown:active{ width: 214px; height: 24px; font-size: 13px; font-family:"微软雅黑"; position: relative; border:none; padding-top:4px; background:url(../images/dropdown.png) repeat-x; } .droparrow{ width:27px; height:27px; background:url(../images/droparrow.png) no-repeat; float:right; } .droparrow:hover{ width:25px; height:25px; background:url(../images/droparrow.png) no-repeat; float:right; border:#F00 1px solid; } .dropmiandiv{ margin-left:40px; width:214px; border: 2px solid #aaaaaa; background:url(../images/dropdown.png) repeat-x; height: 26px; } .chooseItems{ border:#666 2px solid; } .chooseItems .chooseItem{ font-size: 13px; font-family: "微软雅黑"; padding: 5px; } .chooseItems .chooseItem:hover{ background:#09F; } 请选择 独立注册译员 供应商译员 供应商 代理商 请选择 独立注册译员 供应商译员 供应商 代理商 $(".droparrow").click(function(e){ var quest = $(this).parent(); var questwidth = parseInt(quest.width()); var questheight = quest.height(); var left = quest.offset().left; var top = parseInt(quest.offset().top)+parseInt(questheight)+4; var attrs = quest.attr("quest"); var selectsd = $('.chooseItems[answer='+attrs+']'); var selectsdHeight = selectsd.height(); if((top+selectsdHeight)>$(window).height()){ top = top - selectsdHeight - questheight-7; } if($(selectsd).is(":visible")){ $(selectsd).hide(); }else{ $(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show(); } }); $(".dropdiv").click(function(e){ var quest = $(this).parent(); var questwidth = parseInt(quest.width()); var questheight = quest.height(); var left = quest.offset().left; var top = parseInt(quest.offset().top)+parseInt(questheight)+4; var attrs = quest.attr("quest"); var selectsd = $('.chooseItems[answer='+attrs+']'); var selectsdHeight = selectsd.height(); if((top+selectsdHeight)>$(window).height()){ top = top - selectsdHeight - questheight-7; } if($(selectsd).is(":visible")){ $(selectsd).hide(); }else{ $(selectsd).css({"left":left+"px","top":top+"px","width":questwidth+"px"}).show(); } }); $(".chooseItem").click(function(e){ var divhtml = $(this); var displayMember,valueMember; displayMember = divhtml.attr("displayMember"); valueMember = divhtml.attr("valueMember"); var attrs =$(this).parent().attr("answer"); var parent = $("#"+attrs); var olddisplayMember,oldvalueMember; olddisplayMember = parent.attr("displayMember"); oldvalueMember = parent.attr("valueMember"); if(olddisplayMember !=displayMember){ parent.attr("displayMember",displayMember); parent.attr("valueMember",valueMember); parent.html(valueMember); parent.change(); } $(this).parent().hide(); }); $(".dropdiv").change(function(e){ alert($(this).attr("valueMember")); }); $(".dropmiandiv").mouseleave(function(e){ var quest = $(this).attr("quest"); $('.chooseItems[answer='+quest+']').hide(); }); $(".chooseItems").mouseenter(function(e){ $(this).show(); }); $(".chooseItems").mouseleave(function(e){ $(this).hide(); });

js 自定义个性下拉选择框示例_javascript技巧

Articles Liés