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下拉框多选就搞定了 ...
随机推荐
- 实现一个web服务器, 支持php
暂时还很不完善, 不过框架已经写出来了. https://github.com/tw1996/studyHttpd/
- C++ set容器
STL中的set容器的一点总结:(元素唯一,且排序) 1.关于set (头文件:<set>) C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, strin ...
- flask第十四篇——重定向
我们都知道京东的url是www.jd.com,但是当你输入www.jingdong.com时候,你会发现地址自动跳转到了www.jd.com,这种技术手段就叫做重定向. 重定向分为永久重定向和临时重定 ...
- 船长带你看书——《selenium2 python 自动化测试实战》(2)浏览器操作
浏览器操作 # coding: utf-8 from selenium import webdriver from time import sleep driver = webdriver.Firef ...
- python-pycharm控制台输出带颜色
python_控制台输出带颜色的文字方法 在python开发的过程中,经常会遇到需要打印各种信息.海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性.这时候,如果能给重要的信 ...
- JS脚本不能运行
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/moqiang02/article/details/25898295 这段时间在做前端的动态页面,出了 ...
- bzoj2442[Usaco2011 Open]修剪草坪——单调队列优化
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2442 考虑记录前 i 个.末尾 j 个连续选上的最大值.发现时空会爆. 又发现大量的转移形如 ...
- 阿里云视频点播 php开发
先购买开通阿里云的<视频点播>服务,视频点播 可以购买套餐 ,我在项目中使用的是299套餐 开发前在<用户信息管理>生成Access Key Secret,开发密钥使用 阿里云 ...
- AT指令(二)
1.常用操作1.1 AT命令解释:检测 Module 与串口是否连通,能否接收 AT 命令:命令格式:AT<CR>命令返回:OK (与串口通信正常) (无返回,与串 ...
- ubuntu 进入单用户模式
进入单用户模式: 按shift进入 1.开机到grub时,用上下键移到第二行的恢复模式,按e(注意不是回车) 即Ubuntu,With Linux 3.2.0-23-generic(recovery ...