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:将获取表单结果数组转成对象