Bootstrap   发布时间:2022-04-18  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JS组件Bootstrap Select2使用方法详解大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

在介绍SELEct组件的时候,之前分享过一篇@H_673_1@JS组件中bootstrap multiSELEct两大组件较量的文章,这两个组件的功能确实很强大,本文分享SELEct组件的一些用法和特性。 一些通用的单选、多选、分组等功能这里就不多做介绍了,multiSELEct这方面是强项。重点介绍下SELEct2的一些特性效果: @H_673_1@一、特性效果 @H_673_1@1、多选效果

JS组件Bootstrap Select2使用方法详解

JS组件Bootstrap Select2使用方法详解

可以设置最多只能选几个

JS组件Bootstrap Select2使用方法详解

@H_673_1@2、图文结合的效果

JS组件Bootstrap Select2使用方法详解

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

JS组件Bootstrap Select2使用方法详解

输入空格搜索出全部

JS组件Bootstrap Select2使用方法详解

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

JS组件Bootstrap Select2使用方法详解

后台过滤

JS组件Bootstrap Select2使用方法详解

更高级的用法如:

JS组件Bootstrap Select2使用方法详解

其实使用起来也不难,就是一个拼html的过程。

@H_673_1@二、代码示例 @H_673_1@1、多选效果 SELEct2的多选很简单,设置一个属性就好了。


<script src="~/Content/bootstrap/js/bootstrap.js">

<script src="~/Content/SELEct2-master/dist/js/SELEct2.js">

  <SELEct id="sel_menu2" multiple="multiple" class="form-control">
<optgroup label="系统设置">
<option value="1">用户管理
<option value="2">角色管理
<option value="3">部门管理
<option value="4">菜单管理

标签: