当前位置:主页 > JavsScript库 > 表单 >

Bootstrap 5 的增强下拉选择框 - dselect
栏目分类:表单   发布日期:2021-08-26   浏览次数:

dselect 是一个 JavaScript 库,可为原生 Bootstrap 5 选择框添加高级功能(如实时搜索、动态创建、字段验证)。

使用:

1. 将 dselect 的 JavaScript 和 CSS 添加到您的 Bootstrap 5 项目中。

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
 
<!-- dselect -->
<link rel="stylesheet" href="css/dselect.css" />
<script src="js/dselect.js"></script>

2.在目标选择框上初始化选择并完成。

<select class="form-select" id="example">
  <option value="1">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">Bootstrap</option>
  <option value="5">Tailwind</option>
</select>
dselect(document.querySelector('#example'))

3. 启用实时搜索功能。

dselect(document.querySelector('#example'),{
  search: true
})

4. 您还可以通过启用可创建选项向选择框中添加更多选项。

dselect(document.querySelector('#example'),{
  creatable: true
})

5. 判断选择框是否可清除。

dselect(document.querySelector('#example'),{
  clearable: true
})

6. 设置选择框的大小。

dselect(document.querySelector('#example'),{
  maxHeight: '360px',
  size: '', // 'sm' or 'lg'
})

7. 您还可以通过 HTMLdata属性传递选项,如下所示:

<select class="form-select" id="example"
        data-dselect-search="true"
        data-dselect-max-height="300px">
  ...
</select>

官方网站:https://github.com/jarstone/dselect

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库