Jquery 美化select

2023-06-20,,

  功能:美化select 下拉列表

说明:因为IE不能通过css修改样式,所以需要通过Jquery来修改,下面是一个成功的案例,自己再修改下样式就好了

PS:如果需要用到多次的,注意z-index的值,(顶部的要给底部的值大)

 

 Javascript代码:

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

  $(document).ready(function(){

 

$('.select_box span').click(function(){ //鼠标移动函数

 $('.son_ul').hide(); //初始ul隐藏

 $(this).parent().find('ul.son_ul').show();  //找到ul.son_ul显示

 $(this).parent().find('li').hover(function(){

$(this).addClass('hover')},function(){$(this).removeClass('hover')}); //li的hover效果

 $(this).parent().click(function(){},

function(){

$(this).parent().find("ul.son_ul").hide(); 

}

);

 },function(){}

 );

$('ul.son_ul li').click(function(){

 $(this).parents('li').find('span').html($(this).html());

 $(this).parents('li').find('ul').hide();

 });

 

});

</script>


《Jquery 美化select.doc》

下载本文的Word格式文档,以方便收藏与打印。