使用bootstrap-select多选下拉框和ajax请求到的数据添加到下拉框

首先讲下用法:

引入css文件:

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-select.min.css">

引入js文件:

<script src="jquery-1.9.1.min.js"></script>//依赖JQ环境
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.min.js"></script>
<script src="dist/js/i18n/defaults-zh_CN.min.js"></script>//使用显示中文字体的js


开始使用:最关键的就是class="selectpicker"和实现多选的multiple,其他都是锦上添花。另外lay-xxx是关于集合layui框架使用的,可以无视。

<select name="package" id="package" class="selectpicker" multiple data-live-search="true" title="..." data-actions-box="true" lay-ignore="" lay-verify="required" lay-search>

</select> 


最后ajax请求回来的数据添加到下拉框需要:

$('#package').selectpicker('refresh');//调用刷新实例后触发此事件。

$('#package').selectpicker('render');//渲染实例被调用后触发此事件。

其余可以参照文档使用,网址:http://silviomoreto.github.io/bootstrap-select/

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Bootstrap多选下拉框可以使用 `selectpicker` 插件来实现,`selectpicker` 插件是一个基于 Bootstrap下拉框增强工具,它提供了丰富的选项和自定义功能。 使用 `selectpicker` 插件需要引入相应的 CSS 和 JS 文件,可以从官方网站下载或使用 CDN: ```html <!-- 引入 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css"> <!-- 引入 JS 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script> <!-- 引入 JS 文件,如果需要搜索功能则需要引入此文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.14.0-beta2/js/i18n/defaults-zh_CN.min.js"></script> ``` 然后,在 `select` 元素上添加 `data-live-search="true"` 属性来启用搜索功能,添加 `multiple` 属性来启用多选功能,并添加 `class="selectpicker"` 属性来启用 `selectpicker` 插件: ```html <select class="selectpicker" multiple data-live-search="true"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> </select> ``` 在上面的代码中,我们使用了 `option` 元素来定义下拉框的选项。可以根据需要添加更多的选项。在 `select` 元素上添加 `multiple` 属性来启用多选功能。 最后,需要在 JavaScript 中初始化 `selectpicker` 插件: ```javascript $(function () { $('.selectpicker').selectpicker(); }); ``` 以上就是 Bootstrap 多选下拉框的实现方法,可以根据自己的需要进行样式和功能的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值