Bootstrap 基于另一个下拉列表的多选过滤值

Question

我正在根据 data-attributes 的值将 multi-select 级联到另一个。

我有这个方法，它在 parent 的 onChanged 事件中被调用。 parent 我的意思是过滤 child 的内容，即

Parent = 部门多选
Child = 五线谱多选。

child 元素的数据属性为 data-departmentid。

function cascadeMultiselect(control, targetControl, key) {
         this.control = control;
         this.targetControl = targetControl;
         this.key = key;
         this.toHide = [];
         this.toShow =[];
         //Get controls selectedIds
         this.selectedIds = function() {
             var selected = [];
             _.each($(this.control + " option:selected"), function(c) {
                 selected.push($(c).val());
             });
             return selected;
         };

         //Now filter 
         this.filter = function() {

             //Get target control attribute values
             _.each($(targetControl + " option"), function(tc) {
                 //Use the val as an identifier
                 var val = $(tc).val();
                 var data = $(tc).attr("data-" + key);
                 data = data.split(",");

                 var isMatch = anyMatchInArray(data, this.selectedIds());

                 if(!isMatch){
                   $(tc).hide();
                 }
             });
         }

          this.filter();

          $(targetControl).multiselect('rebuild');           
     }

它被这样调用：

 onChange: function() {
             cascadeMultiselect('#departmentlist', '#stafflist', "DepartmentID");
         }

问题是我无法隐藏元素。过滤器工作正常，我试过了：

$(tc).hide(); // tc = targetControl option

我也试过刷新而不是重建。

Answer 1

因为看起来唯一的方法是存储多选的值，然后删除/添加相关值。

我决定使用基本的缓存 class:

 var Cache = (function () {
         this.all = [];
        function Cache(control) {
            this.control = control;
         }

        Cache.prototype.getAll = function () {
            return this.all;
        };

        Cache.prototype.setAll = function (all) {
            this.all = all;
        };
        return Cache;
    })();

函数现在看起来像：

function cascadeMultiselect(control, targetControl, key, cache) {
         this.control = control;
         this.targetControl = targetControl;
         this.key = key;
         this.toHide = [];
         this.toShow =[];
        //To reset the multiselect
         this.reset = function(){
             $(targetControl).html('');
             $(targetControl).multiselect('dataprovider', cache.all)
         }

         //Get controls selectedIds
         this.selectedIds = function() {
             var selected = [];
             _.each($(this.control + " option:selected"), function(c) {
                 selected.push($(c).val());
             });
             return selected;
         };


         //Now filter 
         this.filter = function() {

             //Get target control attribute values
             _.each($(targetControl + " option"), function(tc) {
                 //Use the val as an identifier
                 var val = $(tc).val();
                 var data = $(tc).attr("data-" + key);
                 data = data.split(",");

                 var isMatch = anyMatchInArray(data, this.selectedIds());
                 console.log($(tc));
                 if(!isMatch){
                   $(tc).remove();
                 }
             });

         }
         //If nothing selected then reset the multiselect
           if(this.selectedIds().length == 0){
                 this.reset();
                 return;
             }else{
                 this.filter();
             }

         $(targetControl).multiselect('rebuild');

     }

当我第一次使用数据提供者填充多选时，我将数据添加到缓存中：

 if(cache != null){
             cache.setAll(this.dataToAdd);
         }

Bootstrap 基于另一个下拉列表的多选过滤值

Bootstrap Multiselect filtering values based on another dropdown

bootstrap-multiselect