bootstrap multiselect 多选功能实现方法

作者:LittleFeiHu 时间:2024-05-28 15:38:25 

官方教程

http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

使用方法:

第一步引用样式以及相关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 多选功能实现方法网站的支持!

来源:http://www.cnblogs.com/LittleFeiHu/archive/2017/06/04/6941141.html

标签:bootstrap,multiselect
0
投稿

猜你喜欢

  • Python中easy_install 和 pip 的安装及使用

    2023-08-24 13:34:54
  • getAllResponseHeaders获取网页的http头信息代码

    2010-03-31 14:31:00
  • 深入讨论Python函数的参数的默认值所引发的问题的原因

    2022-08-03 00:54:31
  • python开发一个解析protobuf文件的简单编译器

    2021-08-11 12:01:22
  • 删除目录下相同文件的python代码(逐级优化)

    2023-08-02 17:25:10
  • asp连接mssql2005的代码

    2011-03-29 11:11:00
  • 利用Pandas读取表格行数据判断是否相同的方法

    2022-07-30 22:10:20
  • 如何编写一个基于WEB的文件查询系统?

    2009-11-08 18:55:00
  • python中get和post有什么区别

    2022-04-17 16:45:15
  • python3将变量输入的简单实例

    2022-11-24 13:52:22
  • 利用Python实现眨眼计数器的示例代码

    2021-04-16 10:39:53
  • Python遍历指定文件及文件夹的方法

    2023-04-07 23:10:17
  • Vue中的侦听器及使用场景

    2024-05-09 15:26:05
  • OpenCV实现机器人对物体进行移动跟随的方法实例

    2023-04-20 08:50:49
  • Mysql全局ID生成方法

    2023-07-02 13:59:53
  • vue.js实现简易折叠面板

    2024-05-08 09:33:47
  • 使用keras2.0 将Merge层改为函数式

    2021-01-14 08:29:46
  • Python中删除文件的几种方法实例

    2021-02-02 05:57:13
  • asp如何阻止别人非法链接你网站的图片?

    2010-07-11 21:01:00
  • pandas值替换方法

    2021-05-31 20:22:38
  • asp之家 网络编程 m.aspxhome.com