bootstrap-multiselect用法

今天项目中有一个需求,要用到一个可选的下拉列表框,立刻想到了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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值