Bootstrap select多选下拉框实现代码

 更新时间:2016年12月23日 11:09:11   作者:菠萝小妹  
这篇文章主要为大家详细介绍了Bootstrap select多选下拉框实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下代码

前言

项目中要实现多选,就想到用插件,选择了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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    在javascript中continue的作用是退出当前次循环,break的作用则是一旦当前循环有break那么直接退出整个循环。本文将通过一些示例为大家详细讲讲二者的区别,感兴趣的可以了解一下
    2022-08-08
  • 一个无限级XML绑定跨框架菜单(For IE)

    一个无限级XML绑定跨框架菜单(For IE)

    一个无限级XML绑定跨框架菜单(For IE)...
    2007-01-01
  • JS打印方法的几种方法

    JS打印方法的几种方法

    本文主要介绍了JS打印方法的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • js截取字符串功能的实现方法

    js截取字符串功能的实现方法

    这篇文章主要为大家详细介绍了js截取字符串功能的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • AJAX XMLHttpRequest对象创建使用详解

    AJAX XMLHttpRequest对象创建使用详解

    这篇文章主要介绍了AJAX XMLHttpRequest对象创建使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • javascript ajax 仿百度分页函数

    javascript ajax 仿百度分页函数

    百度分页想必大家都知道吧,浏览网页的朋友都应该知道,下面有个小例子使用到了js、ajax等来模仿百度的分页,感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript动态创建form表单并提交的实现方法

    JavaScript动态创建form表单并提交的实现方法

    这篇文章主要介绍了JavaScript动态创建form表单并提交的实现方法,涉及JavaScript动态创建页面元素及模拟表单提交的技巧,需要的朋友可以参考下
    2015-12-12
  • Javascript引用指针使用介绍

    Javascript引用指针使用介绍

    Javascript引用指针使用介绍,需要的朋友可以参考下
    2012-11-11
  • ES6中常见基本知识点的基本使用实例汇总

    ES6中常见基本知识点的基本使用实例汇总

    这篇文章主要给大家介绍了关于ES6中常见基本知识点的基本使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-04-04
  • 详解微信小程序canvas圆角矩形的绘制的方法

    详解微信小程序canvas圆角矩形的绘制的方法

    这篇文章主要介绍了详解微信小程序canvas圆角矩形的绘制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论