bootstrap-select 动态数据下拉复选框 初使用

使用情景就是先前博客中的 easyui 下拉框用在项目框架，导致页面冲突，所以不得不又去寻找 基于bootstrap的下拉复选框，于是我在网上找到了 bootstrap-select。

言归正传，这是资源的地址：https://download.csdn.net/download/qq_25221835/10830026

大家可以在这个地址下载，或者百度其他地址。

首先看一下效果：

 

需要导入jsp需要的js和css:

（1）juery.js

（2）<script src="XXX/bootstrap-select/js/bootstrap-select.js"></script>
         <script src="XXX/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>   

（3）<link href="XXX/bootstrap-select/css/bootstrap-select.css" rel="stylesheet"/>   

 

代码：

（1）jsp

<label class="label-item single-overflow pull-left" title="唯一标识：可多选"><font color="red">*</font>唯一标识: </label>
   <select id="onlyId" class="form-control selectpicker" multiple data-hide-disabled="true" data-size="6">	</select>
		
<label class="label-item single-overflow pull-left" title="范围标识：">范围标识：</label> 
   <select id="scopeId" class="form-control selectpicker" multiple data-hide-disabled="true" data-size="6"  data-max-options="1">  </select>

<label class="label-item single-overflow pull-left" title="回写标识：">回写标识：</label> 
   <select id="backId" class="form-control selectpicker" multiple data-hide-disabled="true" data-size="6" data-max-options="1">   </select>

关键代码；

class="form-control selectpicker" multiple data-hide-disabled="true" data-size="6" data-max-options="1"

data-size="6"：下拉时显示的元素个数

data-max-options="1"：最多可选格个数，我这里为了单选就设置的1，如若是多选，就不需要这个属性，设置成multiple就好，如上 “唯一标识”

（2）js

  var onlyIdStr ="";
  for(var i=0;i<onlyIdValue.length;i++){
	if(onlyIdValue[i].selected!=undefined){
	   onlyIdStr+='<option value="'+onlyIdValue[i].code+'"selected="true">'+onlyIdValue[i].code+'</option>';
	}else{
   onlyIdStr+='<optionvalue="'+onlyIdValue[i].code+'">'+onlyIdValue[i].code+'</option>';
	     }
        }
        $("#onlyId").html(onlyIdStr);		
        $('#onlyId').selectpicker('refresh');//动态刷新	                                                          

动态数据的格式可以参考我 《easyUI下拉复选框》 那篇博文，值得注意的是：    $('#onlyId').selectpicker('refresh');//动态刷新     缺少这句话，下拉框将无法加载出来