select min2.min.js是什么框架

来源：蜘蛛抓取(WebSpider) 时间：2017-11-06 02:54 标签： select min

尊敬的用户，您当前访问的信息来自于OSCHINA.NET，本页将在三秒后转入对应的页面，请稍后....

前言：之前分享过两篇bootstrap下拉框的组件：  和  ，收到很多园友的关注和提问，最后总结这两篇里面的下拉框组件都存在一些大大小小的问题，比如两种bootstrap mutiselect组件，界面渲染效果略差；再比如select2一些兼容性问题、多选的取值赋值等问题都困扰着博主以及很多园友，项目里面的下拉框很早就替换为今天介绍的这款组件，所以今天介绍给大家，让大家多一个选择也好！感谢大家的持续关注！

说点题外话。本来这篇早就准备写了，不料最近项目准备走前端化开发路线，可忙坏博主了，一时间，Node.js、npm、webpack、react、react-router、ant.design等等技术都得学呀，脑子真是个好东西，能够一下子容纳这么多新知识，虽然各种不适应，但时间一长就慢慢习惯了，所幸博主经常关注这方面的技术，所以学起来并没有那么吃力。关于vue和react，很多群友都讨论过它们的优势和劣势，其实博主觉得说不上哪个组件更优，关键得看项目适应哪种生态，我们选用react很大一部分原因就是看中了ant.design的效果和丰富的组件库。好了，再说就跑题了，以后博主分享搭建前端环境的时候再来细说。

 自定义说明Title，比如我们定义为“请选择省份”

 某些情况下如果多选的数量比较多，我们可以显示“缩略模式”。比如当选择了两项以上的时候

展开最多显示可配置的个数，不如最多显示3项

以上都是些常用功能，更多效果可以查看官方示例！

最后一个文件 defaults-zh_CN.min.js 非必需，是组件中文化的时候才需要引用。

使用就更加简单了，不用任何已经js，直接使用class就可以初始化。

上面是最简单的使用，下面就将一些常用的效果给出代码示例，高手请直接跳过此段。

缩略模式，比如当选中值大于3个的时候只显示选中项的个数，注意这个属性只对多选生效

上面都是组件的初始化的一些东西，一般情况下，我们需要对组件进行取值和赋值，我们应该如何操作呢。

组件赋值就需要稍微变换一下了，如果你直接 $('#sel').val('1'); 这样赋值将会无效，正确的赋值方法为：

在一些级联选择的使用场景中，经常需要在赋值的时候顺便触发一下组件的change事件，我们可以这么做。

如果是多选的赋值，也是一样

上面关于组件的初始化介绍了那么多，都是通过class='selectpicker'去做初始化的，很多情况下，我们的select的option都是动态获取，然后再初始化的，于是乎博主仔细寻找api，看里面是否有远程获取数据，很遗憾，组件没有支持这种远程获取数据的方法。没关系，我们自己封装一个ajax请求，然后动态构造option又有多难呢？这里又得提一下原来那篇封装js组件的文章了，我们按照的思路封装一个不就好了。以下给出一个参考。

//2.将调用时候传过来的参数和default参数合并 //4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据 //5.如果传过来的是字符串，代表调用方法。

 这样封装之后，我们直接使用如下代码即可初始化组件。

很多园友和群友最喜欢的就是demo下载了，博主想说的是希望各位不要太依赖demo，自己先动手尝试可以提高你的学习能力，拿到demo的唯一优势就是上手快一点，但是不利于大家学习。当然本文的demo整理好之后会上传到github，欢迎关注。

至此，本文结束，博主介绍过多个bootstrap的select组件，纵观所有，还是这个稍微好用一些，不管是兼容性还是实现效果都还不错，有兴趣的可以用起来试试。如果你觉得本文能够帮助你，可以右边随意 打赏 博主。

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利

前言：今天继续来看看bootstrap的另一个组件：multiselect。记得在项目开始之前，博主项目组几个同事就使用哪些js组件展开过讨论，其中就说到了select组件，由于项目的整体风格使用的bootstrap风格，所以在选用select组件的时候优先考虑和bootstrap结合使用的。其中就找到了两个这种组件，大体样式和功能基本相同，经过一番讨论，项目组决定使用的bootstrap-multiselect 组件，今天就来看看这两个组件的用法。

一、组件说明以及API

1、第一个组件是写bootstrap table的主人公封装的一个组件——。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。还是给出对应的文档API。

2、第二个组件也是在github上面找的——。这个组件风格和第一个非常相似，文档也挺全面。

这个组件需要的浏览器支持如下：

还好，一般主流的浏览器都能够支持。

（5）设置未选中的初始值：请选择

（7）设置组件的筛选功能

既然是bootstrap的组件，肯定需要bootstrap的支持。我们来看看需要引用的js

（3）设置分组和初始值

（6）更多参数：如果园友们有兴趣，可以看看源码里面的所有参数，虽然没有中文详解，但是根据英文的大概意思就能知道是干什么用的，如果你的multiple select不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

下面是博主从文档里面截选出来的一些自认为比较重要的参数说明：（转载至文档）

全选复选框的显示内容。

是否在一行中显示多个选项。

一行中每个选项的宽度。

是否只允许你选择一行。

（7）常用事件（转载至文档）

当下拉列表被打开时触发。

当下拉列表被关闭时触发。

点击全选或者调用 “checkall” 方法时触发。

点击全不选或者调用 “uncheckall” 方法时触发。

（8）常用方法（转载至文档）

禁用 Multiple Select。在这种模式下，不允许用户操作。

（5）初始化控件选中和未选中的值

初始化的过程和上面的类似，首先引用文件。

其他效果的代码就不一一展示了，代码很简单，看看文档基本没啥问题。

 以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭园友们自己的感觉，使用起来都挺简单，功能基本类似。

我要回帖

更多关于 select min 的文章

 

随机推荐