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;
})