首页>>表单>>jquery select 加入图片，和显示多个项目供选择(2013-12-21)

jquery select 加入图片，和显示多个项目供选择

 本站已经发布了一个《select下拉菜单带图片》这个和它很相似，但是插件多了可以显示sleect option高度

jquery select 加入图片，和显示多个项目供选择
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="content">  
  2.     <div class="content-box">  
  3.       <label class="wLabel-left">Country:</label>  
  4.       <select id="demo" tabindex="1">  
  5.         <option value="">Select a Country</option>  
  6.         <option value="AU" data-icon="./img/AU.png">Australia</option>  
  7.         <option value="CA" data-icon="./img/CA.png" disabled="disabled">Canada</option>  
  8.         <option value="PL" data-icon="./img/PL.png">Poland</option>  
  9.         <option value="TH" data-icon="./img/TH.png">Thailand</option>  
  10.         <option value="UK" data-icon="./img/UK.png">England (United Kingdom)</option>  
  11.       </select>  
  12.     
  13.       <br/>  
  14.   
  15.       <label class="wLabel-left-top">Sports:</label>  
  16.       <select id="demo-multi" tabindex="2" multiple="multiple">  
  17.         <option value="soccer" data-icon="./img/soccer.png">Soccer</option>  
  18.         <option value="archery" data-icon="./img/archery.png">Archery</option>  
  19.         <option value="basketball" data-icon="./img/basketball.png">Basketball</option>  
  20.         <option value="baseball" data-icon="./img/baseball.png">Baseball</option>  
  21.         <option value="curling" data-icon="./img/curling.png">Curling</option>  
  22.         <option value="veolleyball" data-icon="./img/volleyball.png">Volleyball</option>  
  23.       </select>  
  24.   
  25.       <link rel="Stylesheet" type="text/css" href="./wSelect.css" />  
  26.       <script type="text/javascript" src="./wSelect.min.js"></script>  
  27.    
  28.       <style>  
  29.         .wSelect-multiple {  
  30.           width: 150px;  
  31.         }  
  32.       </style>     
  33.   
  34.       <script type="text/javascript">  
  35.         $('select').wSelect();  
  36.   
  37.         $('#demo, #demo-multi').change(function() {  
  38.           console.log($(this).val());  
  39.         });  
  40.   
  41.         $('#demo').val('AU').change(); // should see in console  
  42.         $('#demo').val('PL').wSelect('change'); // should see the selected option change to three  
  43.         $('#demo').append('<option value="US" data-icon="./img/US.png">United States of America</option>').wSelect('reset');  
  44.         $('#demo').val('CA').change();  
  45.           
  46.         $('#demo-multi').val(['soccer', 'archery']).change();  
  47.       </script>  
  48.     </div>  
  49.   </div>  

 


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