JS组件BootstrapSelect2使用方法详解_javascript技巧
来源:懂视网
责编:小采
时间:2020-11-27 21:49:24
JS组件BootstrapSelect2使用方法详解_javascript技巧
JS组件BootstrapSelect2使用方法详解_javascript技巧:在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项
导读JS组件BootstrapSelect2使用方法详解_javascript技巧:在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。
一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项。重点介绍下select2的一些特性效果:
一、特性效果
1、多选效果


可以设置最多只能选几个

2、图文结合的效果

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)
输入内容前

输入空格搜索出全部

滚动条滑动到底部自动加载剩余项

输入文本动态去后台过滤

更高级的用法如:

其实使用起来也不难,就是一个拼html的过程。
二、代码示例
1、多选效果
select2的多选很简单,设置一个属性就好了。
JS组件BootstrapSelect2使用方法详解_javascript技巧
JS组件BootstrapSelect2使用方法详解_javascript技巧:在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项