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