zoukankan      html  css  js  c++  java
  • Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值

    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:将获取表单结果数组转成对象
  • 相关阅读:
    [2018福大至诚软工助教]原型设计+用户规格说明书小结
    高等数理逻辑大作业
    [2018福大至诚软工助教]测试与优化小结
    [2018福大至诚软工助教]结对项目小结
    BETA 版冲刺前准备
    Alpha冲刺之事后诸葛亮
    Alpha 冲刺 (10/10)
    Alpha 冲刺 (9/10)
    Alpha 冲刺 (8/10)
    Alpha 冲刺 (7/10)
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11984186.html
Copyright © 2011-2022 走看看