Bootstrap Multiselect动态创建option简单使用
2019-07-24 14:22:01  By: shinyuu

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的留言板)

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


猜你喜欢的

快速评论


技术评论

DD记账
top
+