Bootstap中下拉框多选

需要引入的个文件

  1. bootstrap-select.js
  2. bootstrap-select.css
  3. bootstrap.min.js
    百度网盘下载连接:
    链接:https://pan.baidu.com/s/11iMeSZXAY4yabVfL5waf1w
    提取码:ii11
第一步: js中写下拉框默认值
	$(document).ready(function() {
            $('.selectpicker').selectpicker({
            	noneSelectedText:"请选择"
            });
        })
第二步: 编写多选下拉框(样式自行修改)
<div class="col-xs-12 col-sm-6 col-md-3">
     <label class="label-item single-overflow pull-left">订单状态:</label>
     <select id="cust1" name="cust1" class=" selectpicker show-tick form-control m-b " multiple data-live-search="true">
             <c:forEach items="${orderType}" var="list">
                    <option value="${list.value}">${list.label}</option>
             </c:forEach>
     </select>
</div>
第三步: 获取值
$("#cust1").val()
第四步: 清空选项
 $("#cust1").val("").trigger("change");//清空
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Bootstrap 提供了一个多选下拉框组件,可以通过添加 `multiple` 属性来实现多选。 示例代码: ```html <select multiple class="form-control"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> </select> ``` 你可以在 `<select>` 元素上添加 `form-control` 类来应用 Bootstrap 的样式。 如果需要在选项显示更多信息,可以使用 `data-*` 属性来添加自定义数据。例如: ```html <select multiple class="form-control"> <option data-subtext="描述1">选项1</option> <option data-subtext="描述2">选项2</option> <option data-subtext="描述3">选项3</option> </select> ``` 在这个例子,`data-subtext` 属性用于添加描述信息。这个属性可以在 JavaScript 通过 `dataset` 属性来获取。 另外,如果需要对多选下拉框进行进一步的自定义,可以使用 Bootstrap 的 JavaScript 插件。例如,可以使用 `selectpicker` 插件来添加搜索框和样式定制。示例代码: ```html <select multiple class="form-control selectpicker" data-live-search="true" data-style="btn-primary"> <option>选项1</option> <option>选项2</option> <option>选项3</option> <option>选项4</option> <option>选项5</option> </select> ``` 在这个例子,我们添加了 `selectpicker` 类来启用插件,并使用 `data-live-search` 属性来添加搜索框。另外,使用 `data-style` 属性来设置样式。你需要在页面引入 `bootstrap-select` 插件的 JavaScript 和 CSS 文件才能使用这个插件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冯小胖 Mini胖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值