Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值

最新推荐文章于 2021-12-17 15:09:10 发布

原创最新推荐文章于 2021-12-17 15:09:10 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

java基础同时被 2 个专栏收录

6 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍了如何在Bootstrap的selectpicker组件中实现多选功能，并展示了通过js代码获取选中项的value和文本值的方法。通过设置maxlength属性，可以限制最多选择的项目数量。

1.页面代码：

页面引入：

bootstrap-select.min.css和

bootstrap-select.min.js、

defaults-zh_CN.min.js文件，并初始化下拉选项框。

带有下拉搜索样式的下拉框属性：data-live-search="true"

下拉选项框可多选属性：multiple

<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 clearfix ">
    <label class="col-xs-4 col-sm-4 control-label required">车班名称：</label>
    <div class="col-xs-8 col-sm-8">
        <div class="input-group">
            <select name="shuttleBusId" class="form-control select-picker" data-live-search="true" multiple>
                <option value="">-- 请选择 --</option>
                <option th:each="iterator : ${vehicleShiftList}"
                        th:value="${iterator.idTrafficVehicleShift}"
                        th:text="${iterator.vehicleShiftName}">
                </option>
            </select>
        </div>
    </div>
</div>

2.js代码// select 多选可以设置做多选中项，使用maxlength

// js代码如下：
// 获取到下拉框说所有选中项
var checkParam = $('#type-select').find('option:selected');
// 选中的ID集合
var checkId = [];
// 选中的文本值集合
var checkText = [];
for (var i=0;i<checkParam.length;i++) {
    checkId.push(checkParam[i].value);
}
for (var i=0;i<checkParam.length;i++) {
    checkText.push(checkParam[i].textContent);
}
// 数组转字符串
var ids = checkId.join(',');
var text = checkText.join(',');
// 1.定义对象，并设置属性名和值---------------------------------------------
// 判断是否选中
if (checkParam.length > 0) {
　　　var hilidayFlag = 1;
    // 定义传入参数对象，并赋值
    var params = {
        holidayFlag: holidayFlag,
        shuttleBusId: ids,
　　　　 shuttleBusName: text
    }
}

// 2.定义对象，并设置属性名和值---------------------------------------------

// 获取表单值
var user= {};
// 获取到页面表单中所有值 name-value形式
var formData = $('#addForm').serializeArray();
formData.forEach(function (item) {
    user[item.name] = item.value;
})

ps:将获取表单结果数组转成对象