用JavaScript来美化HTML的select标签的下拉列表效果(3)

< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" > < option value = "0" > 男 </ option > < option value = "1" > 女 </ option > </ select > <select autoFix="false"> <option value="0">男</option> <option value="1">女</option> </select>

然后,在外部容器显示的时候,手动调用$("#sex").selectFix()
 
2、如果容器的显示或者隐藏是第三方插件控制,修改不方便可考虑下面的方案:
在美化程序中,先判断select是否隐藏,如果否逻辑不变,如果隐藏,则加入一个timer,循环判断元素是否被显示,在其显示的时候再自动调用fix,然后将timer移除
代码如下:
 

//加上隐藏select的操作 ( function ($){ var selectFix= function (){ var select=$( this ); //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ "opacity" :0 }); if (!select.is( ":hidden" )){ var sOptions= this .get(0).options; var setFixDivText= function (selectValue){ var text= "" ; for ( var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if (option.value==selectValue){ text=$(option).text(); break ; } } return text; }; var selectFixDiv=$( '<divid ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' ); select.after(selectFixDiv); var selectWidth=$(select).innerWidth(); var selectFixDivWidth=$(selectFixDiv).innerWidth(); var left=$(select).offset().left; var top=$(select).offset().top-1; $(selectFixDiv).css({ "top" : top, "left" : left, "margin" : 0 }); $(select).bind( "change click" , function (){ $(selectFixDiv).text(setFixDivText($( this ).val())); }); } else { var tasks = function (){ if (!$(select).is( ":hidden" )){ $(select).selectFix(); clearInterval(timer); } }; var timer=setInterval(tasks,500) } }; $.fn.selectFix=selectFix; })(jQuery);

//加上隐藏select的操作 (function($){ var selectFix=function(){ var select=$(this); //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 $(select).css({ "opacity":0 }); if(!select.is(":hidden")){ var sOptions=this.get(0).options; var setFixDivText=function(selectValue){ var text=""; for(var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if(option.value==selectValue){ text=$(option).text(); break; } } return text; }; var selectFixDiv=$('<divid")+'" status="close">'+setFixDivText($(select).val())+'</div>'); select.after(selectFixDiv); var selectWidth=$(select).innerWidth(); var selectFixDivWidth=$(selectFixDiv).innerWidth(); var left=$(select).offset().left; var top=$(select).offset().top-1; $(selectFixDiv).css({ "top" : top, "left" : left, "margin" : 0 }); $(select).bind("change click",function(){ $(selectFixDiv).text(setFixDivText($(this).val())); }); }else{ var tasks = function(){ if(!$(select).is(":hidden")){ $(select).selectFix(); clearInterval(timer); } }; var timer=setInterval(tasks,500) } }; $.fn.selectFix=selectFix; })(jQuery);

运行代码跟原来的不变。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzfzf.html