Bootstrap select多选下拉框实现代码
作者:菠萝小妹 时间:2023-09-15 12:44:55
前言
项目中要实现多选,就想到用插件,选择了bootstrap-select。
附上官网api链接,http://silviomoreto.github.io/bootstrap-select/.
没有中文的。对付看吧。有机会每个方法实践一下,会总结的。我自己也等着呢。
需要引用的它们
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
核心选项
官网有的,期待翻译。。。
核心方法
官网有的,期待翻译。。。
实例应用
bootstrap布局后,select多选代码如下
<div class="form-group">
<label class="col-sm-3 control-label">客资类型:</label>
<div class="col-sm-4">
<select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false">
<option value="0">苹果</option>
<option value="1">菠萝</option>
<option value="2">香蕉</option>
<option value="3">火龙果</option>
<option value="4">梨子</option>
<option value="5">草莓</option>
<option value="6">哈密瓜</option>
<option value="7">椰子</option>
<option value="8">猕猴桃</option>
<option value="9">桃子</option>
</select>
</div>
</div>
js代码:
$(window).on('load', function () {
$('#usertype').selectpicker({
'selectedText': 'cat'
});
});
页面效果:
选择后的效果如下:
获取值, $("#XXX").val()即可
回显操作:
用方法 $('.selectpicker').selectpicker('val', 'Mustard');
Mustard处填入数组。代码如下:
var str='3,4,5,6';
var arr=str.split(',');
$('#usertype').selectpicker('val', arr);
标签:bootstrap,select
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Oracle 8i字符集乱码问题析及其解决办法
2010-07-26 13:29:00
Python反射和内置方法重写操作详解
2023-07-06 12:00:02
Asp Object 之:AddHeader
2008-05-05 12:58:00
sqlserver 日期比较、日期查询常用语句:月的第一天,季度的第一天等
2010-08-01 18:58:00
Python标准库之time库的使用教程详解
2023-07-25 05:25:57
![](https://img.aspxhome.com/file/2023/2/61702_0s.jpg)
FCKeditor技巧之在按钮旁边加文字
2007-10-10 13:17:00
![](https://img.aspxhome.com/file/UploadPic/200710/10/20071010132030615s.png)
asp如何自动反馈电子邮件?
2002-01-01 06:54:00
6个卓越Web设计细节
2010-03-29 12:56:00
![](https://img.aspxhome.com/file/UploadPic/20103/29/01-23s.jpg)
从8个方面优化ASP代码
2007-09-16 18:01:00
泛域名设置问题
2008-03-25 10:03:00
IE8"开发人员工具"使用详解
2009-03-26 12:51:00
![](https://img.aspxhome.com/file/UploadPic/up/2009032613125389.gif)
谦逊编程(翻译整理)
2009-07-28 12:52:00
汇总数据库备份 还原 压缩与数据库转移的方法
2009-01-19 14:07:00
JavaScript for: i++ vs i–
2010-06-24 21:42:00
防止网站内容被人小偷和采集的ASP代码
2007-10-02 13:04:00
也来谈谈”完美”跨域
2008-12-19 12:34:00
好习惯和坏习惯
2009-01-20 12:51:00
SQL注入攻击成为新威胁将挑战操作系统安全
2009-03-16 15:13:00
淘宝搜索框研究报告
2010-07-27 12:49:00
![](https://img.aspxhome.com/file/UploadPic/20107/27/2010727125528102s.png)
SQL文本字段的数字排序问题
2008-11-18 16:47:00
![](https://img.aspxhome.com/file/UploadPic/200811/18/o200852912144-57s.jpg)