基于Bootstrap的下拉框多选 Bootstrap Multiselect 插件使用

基于Bootstrap的下拉框多选插件 Bootstrap Multiselect 的使用方法

1、首先去下载代码：https://github.com/davidstutz/bootstrap-multiselect

2、页面中引入相关的JS和CSS

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

<script src="/js/jquery-2.1.1.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>

3、Html代码

<select id="example-getting-started" multiple="multiple">
<option value="1">PHP</option>
<option value="2">JAVA</option>
<option value="3">PYTHON</option>
<option value="4">LUA</option>
</select>
<input type="hidden" id="tags" name="tags" value="">

4、JS代码

<script>$(document).ready(function() {$('#example-getting-started').multiselect({buttonText: function(options, select) {if (options.length === 0) {return '请选择标签 ...';}else{var labels = [];options.each(function() {if ($(this).attr('label') !== undefined) {labels.push($(this).attr('label'));}else {labels.push($(this).html());}});$('#tags').val(labels.join(',') + '');return labels.join(', ') + '';}}});});</script>

5、如果要设置初始化选中的值只需要在

<option value="1">PHP</option> 里面设置成 <option value="1" selected="selected">PHP</option>

基于Bootstrap的下拉框多选 Bootstrap Multiselect 插件使用相关推荐

基于Material实现下拉框多选并且可点击“x”删除（Chips）
基于Material实现下拉框多选并且可点击"x"删除(Chips) 需求实现写在最后需求近期在使用Material搭建一个后台系统,遇到一个如下需求: 功能需求如下:输入 ...
bootstrap搜索下拉框：bootstrap-select
实现bootstrap搜索下拉框,本文采用bootstrap-select插件:bootstrap-select插件依赖jquery1.8+和bootstrap, 所以需要先引入jquery和boot ...
bootstrap-select实现下拉框多选效果
bootstrap-select实现下拉框多选效果听语音在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看方法/步骤 1 ...
js实现下拉框多选_bootstrap基础快速入门-10 dropdown下拉框
大学生就可以看懂的bootstrap基础实战系列,pre标签里是笔记总结,动手实际操作一下会加强理解.有疑问留言交流哦. bootstrap是进阶html5很基础常用的前端框架,可以做自适应漂亮的界面 ...
easyui前端实现多选框_EasyUI实现下拉框多选功能
本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可.下面是源码: 利用EasyUI实现多选下 ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
Excel怎么下拉框多选
打开Exlce, 确定,然后右击查看代码,把这段代码复制到新建的文件里面此时Excel会给出提示,选择否,,系统会提示保存,在保存的时候选择启用宏的工作簿然后保存,此时Excel下拉框多选就搞定了 ...
关于EXCLE 下拉框多选的设置
关于EXCLE 下拉框多选的设置. 本文转载于:https://www.cnblogs.com/boosasliulin/p/5970120.html 本文转载于:https://blog.csdn. ...
如何设置下拉框的选中项
设置下拉框中选中项当点击设置按钮时,下拉框的默认值会被随机选中.做以下学习记录: 要完成设置下拉框的选中项,我们要解决以下问题: 给按钮注册事件获取下拉框中所有的option 随机生成索引根据索 ...

基于Bootstrap的下拉框多选 Bootstrap Multiselect 插件使用

基于Bootstrap的下拉框多选 Bootstrap Multiselect 插件使用相关推荐

最新文章

热门文章