首页>>表单>>jQuery个性美化select下拉框 点击弹出层选择(2018-07-25)

jQuery个性美化select下拉框 点击弹出层选择

jQuery个性美化select下拉框 点击弹出层选择
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form action='#' method='post'>  
  2.     <fieldset>  
  3.         <select class="selectbox" id="" name="">  
  4.             <option value="freejs.net">freejs.net</option>  
  5.             <option value="CSS3">CSS3</option>  
  6.             <option value="Javascript">Javascript</option>  
  7.             <option value="Ruby">Ruby</option>  
  8.             <option value="Python">Python</option>  
  9.             <option value="C++">C++</option>  
  10.         </select>  
  11.     </fieldset>  
  12. </form>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function (){  
  3.     $('.selectbox').wrap('<div class="select_wrapper"></div>')  
  4.     $('.selectbox').parent().prepend('<span>'+ $(this).find(':selected').text() +'</span>');  
  5.     $('.selectbox').parent().children('span').width($('.selectbox').width());     
  6.     $('.selectbox').css('display', 'none');                   
  7.     $('.selectbox').parent().append('<ul class="select_inner"></ul>');  
  8.     $('.selectbox').children().each(function(){  
  9.         var opttext = $(this).text();  
  10.         var optval = $(this).val();  
  11.         $('.selectbox').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');  
  12.     });  
  13.   
  14.     $('.selectbox').parent().find('li').on('click', function (){  
  15.         var cur = $(this).attr('id');  
  16.         $('.selectbox').parent().children('span').text($(this).text());  
  17.         $('.selectbox').children().removeAttr('selected');  
  18.         $('.selectbox').children('[value="'+cur+'"]').attr('selected','selected');  
  19.         //alert($('.selectbox').children('[value="'+cur+'"]').text());                
  20.         /*console.log($('.selectbox').children('[value="'+cur+'"]').text());*/  
  21.     });  
  22.       
  23.     $('.selectbox').parent().on('click', function (){  
  24.         $(this).find('ul').slideToggle('fast');  
  25.     });  
  26. });  
  27. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_657.html