Bootstrap-select 动态绑定值

需求：

1，下拉框多选功能

2，父级菜单联动

 

一，下载对应的js,css

 

https://cdnjs.com/libraries/bootstrap-select  //下载对应的js,css

 

<link href="~/Content/bootstrap/bootstrap-select.css" rel="stylesheet" /> 
<script src="~/Content/bootstrap/bootstrap.min.js"></script> 
<script src="~/Content/bootstrap/bootstrap-select.js"></script>

 

二，页面，js代码(说明：multiple 多选  data-live-search="true"  搜索)

  <select id="CateIds" type="select" multiple data-live-search="true"></select>

 

初始化js绑定方法

  $('#CateIds').selectpicker({
                    'selectedText': 'cat',
                    'noneSelectedText': '==请选择=='
                });

 

联动绑定

 $('#CourseId').bind("change", function () { 

                var _value = $(this).val(); //父选择值
                
                     $.ajax({
                    url: '你的请求地址',
                    data: { courseId: _value },//参数
                    type: "GET",
                    dataType: "json",
                    async: false,
                         success: function (data) {
                             
                             var data1 = data.data; 
                             if (data1.length > 0) {
                                 var html = "";
                                 $.each(data1, function (i, item) {

                                     html += '<option value="' + item.text + '">' + item.text + '</option>'


                                 });
                                 $('#CateIds').html(html);
                                 $('#CateIds').selectpicker('refresh');//重新渲染值
                                 $('#CateIds').selectpicker('render');
                                 $('#CateIds').selectpicker({
                                     'selectedText': 'cat',
                                     'noneSelectedText': '==请选择=='
                                 });

                             } else {
                                  $('#CateIds').html("");
                                 $('#CateIds').selectpicker('refresh');//重新渲染值
                                 $('#CateIds').selectpicker('render');
                                 $('#CateIds').selectpicker({
                                     'selectedText': 'cat',
                                     'noneSelectedText': '==请选择=='
                                 });
                             }  
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        dialogMsg(errorThrown, -1);
                    }
                });
            });

 

 

三，修改绑定值

                           var valueArr = [];
                             var str="";
                             var varr = data.CateIds.split(','); //数据库存储的值，多个默认逗号分隔
                             for(var i=0;i<varr.length;i++){
                                valueArr.push(varr[i]);
                                }
                              $("#CategoryIds").selectpicker('val', valueArr); //绑定值
                              $('#CategoryIds').selectpicker('refresh');//刷新

 

四，获取选中值

// js代码如下：
// 获取到下拉框说所有选中项
var checkParam = $('#CateIds').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;
})