zoukankan      html  css  js  c++  java
  • Bootstrap-select 动态绑定值

    需求:

    1,下拉框多选功能

    2,父级菜单联动

    一,下载对应的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;
    })
  • 相关阅读:
    No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=arm64, VALID_ARCHS=armv7 armv7s).
    播放器 倒计时 闹钟 日期 分秒 时间算法
    iOS 8 以后获取地图坐标:
    数据存储(直接写入、NSUserDefaults、NSkeyedArchiver)
    图片处理 模糊效果
    手把手教你Windows下Go语言的环境搭建
    github 上传或删除 文件 命令
    域名解析-delphi 源码
    指针与引用
    指针
  • 原文地址:https://www.cnblogs.com/qingjiawen/p/14262924.html
Copyright © 2011-2022 走看看