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

来源:互联网   编辑:思良  发表时间:2018-08-10  关注度:2122  

 本站已经发布了一个《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

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:限制div高度当内容多了溢出时显示滚动条


上一篇:关于搜索问题,全部都是没有搜索到相关的内容 !


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信