首页>>表单>>jQuery下拉多选插件 下拉框复选 包括全选(2019-04-29)

jQuery下拉多选插件 下拉框复选 包括全选

本例与之前的《select 下拉框多选，用select代替checkbox》功能类似的，加了一个全选功能，另外有人之前买代码后问传递值，这边写了一个，就是简单的数组

参数

placeholder:选择框占位符

searchText:下拉搜索占位符

showSearch:显示搜索 (true/false)

numDisplayed:超出数量整合

overflowText:超出数量整合文本提示,{n}为数量

注意本例用的css和js全部是必须的，不然无法显示全部功能

jQuery下拉多选插件 下拉框复选 包括全选
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2. <form action="send.php">  
  3. <select id='m1' class="demo" multiple="multiple" name="m1[]">  
  4. <optgroup label="广东">  
  5. <option value="1" selected>深圳</option>  
  6. <option value="2">广州</option>  
  7. <option value="3">佛山</option>  
  8. <option value="4">湛江</option>  
  9. </optgroup>  
  10. <optgroup label="浙江">  
  11. <option value="5">杭州</option>  
  12. <option value="6">宁波</option>  
  13. <option value="7">温州</option>  
  14. </optgroup>  
  15. </select>  
  16. <select id='m2' class="demo1" multiple="multiple">  
  17. <option value="1">深圳</option>  
  18. <option value="2">广州</option>  
  19. <option value="3">佛山</option>  
  20. <option value="4">湛江</option>  
  21. <option value="5">杭州</option>  
  22. <option value="6">宁波</option>  
  23. <option value="7">温州</option>  
  24. </select>  
  25. <input type="submit">  
  26. </form>  
  27. <br />  
  28. <button id="current" class="btn btn-primary btn-sm">已经选择的值</button>  
  29. </div>  

 

JavaScript Code
  1. <script>  
  2. $(function() {  
  3.         $('.demo').ySelect();  
  4.         $('.demo1').ySelect(  
  5.           {  
  6.             placeholder: '请先选择一些项目',  
  7.             searchText: '搜索',  
  8.             showSearch: true,  
  9.             numDisplayed: 4,  
  10.             overflowText: '已选中 {n}项',  
  11.             isCheck:false  
  12.           }  
  13.         );  
  14.   
  15.       $("#current").click(function(){  
  16.         alert($("#m1").ySelectedValues(","));  
  17.         alert($("#m1").ySelectedTexts(","));  
  18.       });  
  19.   
  20.   
  21.   
  22. });  
  23. </script>  

 


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