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

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

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

演示

 

 

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