Bootstrap Multiselect动态创建option简单使用

1.bootstrap-multiselect 顾名思义基于bootstrap，bootstrap基于jquery,所以第一步，引入文件1bootstrap.css/ juery.js /bootstrap.js  引入此三个文件，是常用的就不贴出来了； 引入下面的两个文件，如果没有请去github下载：https://github.com/davidstutz/bootstrap-multiselect

<link rel="stylesheet" type="text/css" href="bootstrap-multiselect.css">
<script type="text/javascript" src="bootstrap-multiselect.js"></script>

2.开始使用

<div style="width: 100%; margin:20px">
   <select multiple="multiple" style="width:100%; ">
	   <option>一室一厅</option>
	   <option>两室一厅</option>
	   <option>三室一厅</option>
   </select>
</div>

这是一段都知道的代码，我尽量说的简便易懂；

$(´select´).multiselect();

3.动态添加option

<div style="width: 100%; margin:20px">
    <select multiple="multiple" name="companyIdStr"  class="companyIdStr" style="width:100%; ">
    </select>
</div>

js动态添加

function multiselect(obj) {  //初始化方法
  $(obj).multiselect({
      includeSelectAllOption: true,
      enableClickableOptGroups: true,
      enableCollapsibleOptGroups: true,
      buttonWidth: 195,
      maxHeight: 300,
  });
}
//动态创建option
function newOption(data, className) {
  var option;
  for (var i = 0; i < data.length; i  ) {
      if (data[i].selected) {  //判断是否要初始化时就选择
          option  = ´<option value="´   data[i].value   ´"  selected="´   data[i].selected   ´">´   data[i].label   ´</option>´;
      } else {
          option  = ´<option value="´   data[i].value   ´">´   data[i].label   ´</option>´;
      }
  }
  $(className).html(option);//将内容显示在复选框， $(className).append(option) 也是可以的;
  multiselect(className);
}
var data = [{ value: ´1´, label: ´一室一厅´, selected: true }, { value: ´2´, label: ´两室一套´ }, { value: ´3´, label: ´两室三套´ }];
newOption(data, ´.companyIdStr´);

这里我们是默认第一个可选的，是不是很简单呀

若资源对你有帮助，浏览后有很大收获，不妨小额打赏我一下，你的鼓励是维持我不断写博客最大动力。

想获取DD博客最新代码，你可以扫描下方的二维码，关注DD博客微信公众号（ddblogs）。

或者你也可以关注我的新浪微博，了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）。

如对资源有任何疑问或觉得仍然有很大的改善空间，可以对该博文进行评论，希望不吝赐教。

为保证及时回复，可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）。

感谢你的访问，祝你生活愉快、工作顺心、欢迎常来逛逛。