bootstrap-multiselect用法

最新推荐文章于 2024-08-08 07:40:01 发布

游响云停

最新推荐文章于 2024-08-08 07:40:01 发布

阅读量2.8k

点赞数 1

分类专栏： jquery 文章标签： bootstrap-multiselect

本文链接：https://blog.csdn.net/zx13525079024/article/details/103162603

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天项目中有一个需求，要用到一个可选的下拉列表框，立刻想到了bootstrap-multiselect, 查看了用法，网上虽然有很多，但是也摸索了一段时间。效果如下

1.引入文件

首先要引入相关的css文件和js文件，这两个文件可以从这个地方下载

https://github.com/davidstutz/bootstrap-multiselect

<link rel="stylesheet" href="#springUrl('')/static/css/bootstrap-multiselect.css" />
<script src="#springUrl('')/static/js/bootstrap-multiselect.js"></script>

2. 动态添加

  <select id="multiselect"  multiple="multiple">
                      
                               </select>

从后台读取数据，动态添加

 $.ajax({  
                  url: '$basePath/storeInfo/queryStoreInfo' ,  
                  type: 'POST',  
                  data: {"customerCode": $("#customerCode").val()},
                  success: function (returndata) { 
                    var optionstring = "";
        		  	$.each(returndata.result, function(idx, obj) {
        		  		optionstring += "<option value=\"" + obj.storedCode + "\" >" + obj.storedName + "</option>";
        			});
        			//alert(optionstring);
        			$("#multiselect").html(optionstring); 
        			
        			
        			$("#multiselect").multiselect("destroy").multiselect({  
                                 // 自定义参数，按自己需求定义  
                                    selectAllText:  '全部',  //全选的checkbox名称
                                    nonSelectedText:  '请选择',  //未选择情况下的提示 
                                   maxHeight : 350,   
                                   includeSelectAllOption : true,   
                                    numberDisplayed : 5 ,
                                    buttonWidth:195,
                                    buttonText: function(options) 
                                    {
                                          if(options.length == 0) 
                                           {
                                              return '--请选择门店--';
                                           }
                                           else
                                           {
                                             var selected = '';
                                             options.each(function() {
                                               selected += $(this).text() + ',';
                                              });
                                             return selected.substr(0, selected.length -1) ;
                                           }
                                   } 
                          });

切记，动态添加后一定要用 $("#multiselect").multiselect("destroy")方法属性，否则不会生效。

3.获取下拉列表中选择的值

  var codes ="";
              $("#multiselect option:selected").each(function ()
               {
                  
                   codes+=$(this).val()+",";
               });

这样就可以实现了，再次感谢这篇文章

https://www.cnblogs.com/sulishibaobei/p/8204904.html