用户定义的简单时尚js下拉选择框

复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title统计测试/title脚本src=' http :/js/jquery。js /脚本样式类型='text/css ' .drop div { width : 180 pxh three : 24px飞越：隐藏；向左浮动：font-size : 13px字体系列： '微软雅黑；相对位置：padd : 0px 26px 0px 5pxborder 3360固态1px # cecece背景：网址(./images/droparrow.png) 186px不重复；} .dropmiandiv { margin-left : 40px；宽度： 213 px背景：网址(./images/下拉列表。png)重复-x；高度： 27px} .选择项目{边框：实心1px # cece} .选择项目选择ITeM { font-size : 13px字体系列： '微软雅黑；padd : 5pxborder-bottom :实心1px # cecece }。选择项目。选择项目：最后一个子项目{边框-底部：无；} .选择项目。选择项目：悬停{背景： # f2f2}/style/head body div class=' dropmiandiv ' quest=' select 1 '输入类型=' text ' readonly=' readonly ' id=' select 1 '显示成员='-1 '值成员='请选择class='dropdiv' value='请选择//div div class='chooseItems '答案=“选择1”样式=“显示：无；位置：绝对' div类='选择项目'显示成员=' 0 '值成员='独立注册译员'独立注册译员div class=' choose item '显示成员=' 1 '值成员='供应商译员'供应商译员/div class=' choose item '显示成员=' 2 '值成员='供应商'供应商/div class=' choose item '显示成员=' 3 '值成员='代理商'代理商/div/div class=' dropmiandiv ' quest=' select 2 ' style=' position : absolute；' top:200px '输入类型=' text ' readonly=' readonly ' id=' select 2 '显示成员='-1 '值成员='请选择class='dropdiv' value='请选择//div div class='chooseItems '答案=' select 2 '样式=' display : none位置：绝对' div类='选择项目'显示成员=' 0 '值成员='独立注册译员'独立注册译员div class=' choose item '显示成员=' 1 '值成员='供应商译员'供应商译员/div class=' choose item '显示成员=' 2 '值成员='供应商'供应商/div class=' choose item '显示成员=' 3 '值成员='代理商'代理商/div /div /body /html脚本类型='text/javascript' $(' .dropdiv ').单击（函数(e){ $(').选择项目').向上滑动(300);e . stopperpagation()；var quest=$(this).parent()；var quest width=ParSeint(quest。width())-2；var任务高度=任务。高度()；var left=quest.position().左parsent(quest。CSS('左边距'))ParSeint(quest。CSS('左填充')；var top=parseInt(quest.position().top)parsent(任务高度)4；var attrs=quest。attr(' quest ')；var selectsd=$(' .选择项目[答案=' attrs ']')；var selectsdHeight=selectsd。高度()；if((顶部选择高度)$(窗口)。height()){ top=top-selectsdHeight-questheight-7；} if($(selectsd).是(' :可见'){ $(selectsd).向上滑动(300);}else{ $(selectsd).css({'left':left 'px '，' top':top 'px '，' width':questwidth 'px'}).向下滑动(300);} });$('.选择项目').click(function(e){ e . stopperpagation()；var div html=$(this)；var displayMember，valueMeMBer display MeMBer=div html。attr(' display MeMBer ')；value MeMBer=div html。attr(' ValueMember ')；var attrs=$(this).父项()。attr('答案');var parent=$(' # ' attrs)；var olddisplayMember，oldvalueMemberolddisplayMember=parent。attr(' display member ')；oldvalueMember=父级。attr('值成员')；if(olddisplayMember！=display成员){ parent。attr('显示成员'，显示成员)；parent.attr('valueMember '，ValueMember)；父母。值成员；父母。change()；} $(这个)。父项()。向上滑动(300);});$(文档)。点击(函数(e)){ var target=$(e . target)；if(目标。更近了.选择项目').长度==0){ $('。选择项目').向上滑动(300);} });/script效果图