欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

bootstrap multiselect 多选功能实现方法

程序员文章站 2022-04-10 10:15:38
官方教程 使用方法： 第一步引用样式以及相关js

官方教程

使用方法：

第一步引用样式以及相关js

<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<!-- include the plugin's css and js: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" rel="external nofollow" type="text/css"/>

 第二步 构造selection（注意 需要设置multiple属性，否则依然是单选模式，multiple="multiple" ）

<!-- build your select: -->
<select class="multiselect" multiple="multiple">
 <option value="cheese">cheese</option>
 <option value="tomatoes">tomatoes</option>
 <option value="mozarella">mozzarella</option>
 <option value="mushrooms">mushrooms</option>
 <option value="pepperoni">pepperoni</option>
 <option value="onions">onions</option>
</select>

 第三步 初始化插件：

<script type="text/javascript">
 $(document).ready(function() {
  $('.multiselect').multiselect();
 });
</script>

常用方法：

select
$('#cid').multiselect('select', arr[i]); 给控件设置选中项

获取值

 $('#cid').val();获取控件所有的选中值

以上所述是小编给大家介绍的bootstrap multiselect 多选功能实现方法，希望对大家有所帮助

上一篇： Node.js 使用命令行工具检查更新

下一篇： Bootstrap fileinput文件上传组件使用详解

推荐阅读