首页>>表单>>select下拉菜单带图片(2013-11-22)

select下拉菜单带图片

 非模拟select，而是真实的select选择，本例用到比较多的js和css，请到演示页面查看

select下拉菜单带图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form>  
  2.     
  3.   <select name="test" class="themes">  
  4.     <option value="SelectBoxIt themes:" data-iconurl="themes-icon.png">  
  5.     SelectBoxIt themes:  
  6.     </option>  
  7.     <option value="Twitter Bootstrap" data-iconurl="apple-touch-icon-144-precomposed.png">  
  8.     Twitter Bootstrap  
  9.     </option>  
  10.     <option value="jQuery UI" data-iconurl="jquery-ui-logo.png">  
  11.     jQuery UI  
  12.     </option>  
  13.       
  14.   </select>  
  15. </form>  

 

JavaScript Code
  1. <script>  
  2. jQuery(function($) {  
  3.   
  4.   
  5.   $('select').selectBoxIt({ defaultText: 'Testing', autoWidth: false });  
  6.   
  7.   $('form').removeClass('hidden');  
  8.   
  9.   
  10. });  
  11. </script>  

 


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