bootstrap-select.js 下拉框多选后动态赋值
话不多说先上demo 其实demo是从官网下载的 只稍作改动 由于没有搞清楚怎么上传源代码 就把官网的链接贴出来吧 https://github.com/silviomoreto/bootstrap-select/archive/master.zip
其中改动的部分
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="maxOption2" class="col-lg-2 control-label">multiple, show-menu-arrow, maxOptions=2</label> <div class="col-lg-10">
<select id="maxOption2" class="selectpicker show-menu-arrow form-control" multiple >
<option value="chicken">chicken</option>
<option value="turkey">turkey</option>
<option value="duck">duck</option>
<option value="goose">goose</option>
</select>
</div>
</div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {
var mySelect = $('#first-disabled2'); $('#special').on('click', function () {
mySelect.find('option:selected').prop('disabled', true);
mySelect.selectpicker('refresh');
}); $('#special2').on('click', function () {
mySelect.find('option:disabled').prop('disabled', false);
mySelect.selectpicker('refresh');
}); $('#basic2').selectpicker({
liveSearch: true,
maxOptions: 1
});
$("#maxOption2").selectpicker('val',['chicken','turkey','duck']);
}); </script>
其中,$("#maxOption2").selectpicker('val',['chicken','turkey','duck']);为设置多选值!
注意事项:1.此代码需写在页面的加载完成之后触发。
2.在实际用的时候jquery版本用最新的就可以了。我用的3.0
3.实际用的时候如果是动态赋值需要 $("#maxOption2").selectpicker('refresh');刷新。
bootstrap-select.js 下拉框多选后动态赋值的更多相关文章
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- jquery实现下拉框多选
一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...
- vue实现下拉框全选和输入匹配
实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...
- select change下拉框改变事件 设置选定项,禁用select
select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- jq select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性
select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...
- js下拉框
Js下拉框 http://sc.chinaz.com/tag_jiaoben/XiaLaKuang.html
- combobox中动态加入几个checkbox,实现下拉框多选
combobox中动态加入几个checkbox,实现下拉框多选,将一个checkbox选中时其内容就会在combobox中显示出来,将另一个checkbox选中时其内容会跟在第一个checkbox的内 ...
- Excel怎么下拉框多选
打开Exlce, 确定,然后 右击查看代码,把这段代码复制到新建的文件里面 此时Excel会给出提示,选择否,,系统会提示保存,在保存的时候选择启用宏的工作簿然后保存,此时Excel下拉框多选就搞定了 ...
随机推荐
- 如何创建一个基于 MSBuild Task 的跨平台的 NuGet 工具包
MSBuild 的 Task 为我们扩展项目的编译过程提供了强大的扩展性,它使得我们可以用 C# 语言编写扩展:利用这种扩展性,我们可以为我们的项目定制一部分的编译细节.NuGet 为我们提供了一种自 ...
- cockroachdb 安装试用(单机伪分布式)
1. 下载 以下地址,选择对应的操作系统版本即可 https://www.cockroachlabs.com/docs/stable/install-cockroachdb.html 2. 启动 // ...
- Linux环境下Maven的.m2文件夹
aven中的.m2文件夹 安装完maven是没有.m2文件夹的.在linux中以.开头的文件夹都是隐藏的.当使用maven命令的时候,maven自动会创建.m2文件夹. 运行命令mvn help:sy ...
- ffmpeg/ffplay 添加实时的时间水印 (转)
右上角添加时间水印 ffmpeg -i 0.ts -vf drawtext="fontfile=arial.ttf:x=w-tw:fontcolor=white:fontsize=30:te ...
- win7怎么安装和启动 jboss
本文以JBoss Application Server 4.2.1 GA(以下简称JBoss)为例,介绍它在Windows平台上的启动过程.为了方便叙述,对平台环境做以下假定:Java运行时的安装路径 ...
- Markdown语法简单介绍
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 一.标题 # 这是标题一 ## 这是标题二 ### 这是标题三 #### 这是标题 ...
- 在ng中的select的使用方法的讲解
项目中我们可能会使用到条件过滤选择框之类的东西,最简单的就是input.select. 关于select的使用我们通常会需要从数据库中返回数据进行动态绑定. 此时我们会有两种方式: 1)使用ng-re ...
- GOF23设计模式之命令模式(command)
一.命令模式概述 将一个请求封装到一个对象,从而使得可用不同的请求对客户进行参数化. 二.命令模式结构 (1)Command 抽象命令类 (2)ConcreteCommand 具体命令类 (3)Inv ...
- MongoDB day02
1.非关系型数据库和关系型数据库比较 1. 不是以关系模型构建的,结构自由 2. 非关系型数据库不保证数据的一致性 3. 非关系型数据库可以在处理高并发和海量数据时弥补关系型数据库的不足 4. 非关系 ...
- 无线加密的多种方法及其区别(WEP WPA TKIP EAP)
无线加密的多种方法及其区别(WEP WPA TKIP EAP) 无线网络的安全性由认证和加密来保证. 认证允许只有被许可的用户才能连接到无线网络: 加密的目的是提供数据的保密性和完整性(数据在传输过程 ...