bootstrap4c-chosen下拉框

最新推荐文章于 2024-04-17 18:06:17 发布

小关enter

最新推荐文章于 2024-04-17 18:06:17 发布

阅读量3k

点赞数

分类专栏：前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/gty931008/article/details/81462178

版权

前端专栏收录该内容

9 篇文章

订阅专栏

bootstrap4c-chosen是适用于Bootstrap4的下拉框增强插件，提供搜索、选项分组和多选等功能。通过npm安装后，在页面中引入相关文件并初始化，即可实现下拉框的增强功能。详细使用方法包括single、single required、multiple、optgroup和optgroup clickable五种模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap4c-chosen是一款Bootstrap4下拉框功能强化插件。该插件在原生bootstrap4下拉框的基础上，新增了搜索、选项分组、多选等功能，非常实用。

安装

可以通过npm来安装bootstrap4c-chosen插件。

npm install bootstrap4c-chosen

使用方法

在页面中引入bootstrap4相关文件，component-chosen.min.css文件以及jquery和chosen.jquery.js文件。

<link rel="stylesheet" href="path/to/bootstrap.min.css">

<link rel="stylesheet" href="path/to/component-chosen.min.css">

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/chosen.jquery.js"></script>

HTML结构

bootstrap4c-chosen下拉框功能强化插件有以下五种增强功能。

1、single（单选）

Bootstrap4下拉框功能强化效果-1

<select id="single" class="form-control form-control-chosen"

data-placeholder="Please select...">

<option></option>

<option>Option One</option>

<option>...</option>

</select>

2、single required（单选）

Bootstrap4下拉框功能强化效果-2

<select id="required" class="form-control form-control-chosen-required"

data-placeholder="Please select...">

<option></option>

<option>Option One</option>

<option>...</option>

</select>

3、multiple（多选）

Bootstrap4下拉框功能强化效果-3

<select id="multiple" class="form-control form-control-chosen"

data-placeholder="Please select..." multiple>

<option></option>

<option>Option One</option>

<option>...</option>

</select>

4、optgroup（分组）

Bootstrap4下拉框功能强化效果-4

<select id="optgroup" class="form-control form-control-chosen"

data-placeholder="Please select..." multiple>

<optgroup label="Label A">

<option>Option One</option>

<option>...</option>

</optgroup>

<optgroup label="Label B">

<option>Option Five</option>

<option>...</option>

</optgroup>

</select>

5、optgroup clickable（分组）

Bootstrap4下拉框功能强化效果-5

<select id="optgroup_clickable" class="form-control form-control-chosen-optgroup"

title="clickable_optgroup"

data-placeholder="Please select..."

multiple>

<optgroup label="Label A">

<option>Option One</option>

<option>...</option>

</optgroup>

<optgroup label="Label B">

<option>Option Five</option>

<option>...</option>

</optgroup>

</select>

初始化插件

在页面DOM原生加载完毕之后，通过下面的方法来初始化该Bootstrap4下拉框功能强化插件。

$('.form-control-chosen').chosen();

该Bootstrap4下拉框功能强化插件的github地址地址为：https://github.com/haubek/bootstrap4c-chosen

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。