javascript - 创建一个包含多个选项的下拉列表，其中包含自定义过滤器

Question

我已经在网上搜索过，但还没有找到解决我的问题的方法。也许我搜索了错误的术语，如果我的问题的解决方案可能非常简单，我很抱歉。

示例表:

所以，我想做的是:

• 提供一个包含多个选项的下拉列表
• 每个选项都提供一个自定义过滤器(例如“option1”显示所有可用的记录，'option2' 显示所有可用的记录可用并具有标签 F，'option3' 显示所有记录可用并有标签 E, …)
• 立即“实时”应用过滤器

那么，我该如何实现呢？

提前致谢。

Answer 1

我创建了随时可用的组件(不需要 Jquery 的纯 js)，可以按列值过滤表行。组件使用数据属性，可以自定义过滤任何列。

var FilterSelect=function(selectSelector,tableSelector){

   this.$select=document.querySelector(selectSelector);//our select
   this.$table=document.querySelector(tableSelector); //our table
   
   this.filter=null; //filter value
   this.columnNum=null; //column num to check value
  
   this._bind();
  
   
   //run setting and filtering in beginning ( option can be set )
   this._setAndFilter();

};



// method sets parameters from chosen option
FilterSelect.prototype._set=function(){

      var option=this.$select.options[this.$select.selectedIndex];//get current option
    this.filter=typeof option.dataset.filter!='undefined'?option.dataset.filter:null;
    
    this.columnNum=typeof option.dataset.columnNum!='undefined'?option.dataset.columnNum:null;
  
};

//method filters table
FilterSelect.prototype._filterTable=function(){

  var trs=this.$table.querySelectorAll("tr");
  
  for (var i=0; i<trs.length; i++){
    
    
      var tr=trs[i];
    
      if (this.columnNum==null){
      
        //no filters
        tr.style.display="block"
        continue;
      }
    
      
      var td=tr.querySelectorAll("td")[parseInt(this.columnNum)];//get td 
    
      var value=td.innerText;//get td inner text to compar
    
      if (value!=this.filter)
      tr.style.display="none"; //filter does not match - hide
      else
        tr.style.display="block";//display block - filter match
  }
  
};

//filtering table and setting options
FilterSelect.prototype._setAndFilter=function(){

   this._set();//set current filter and column
   this._filterTable();//do table filtering
  
};

//bind select change event
FilterSelect.prototype._bind=function(){

  this.$select.addEventListener("change",function(){
  

    this._setAndFilter();
    
    
  }.bind(this));
  
  

};

//usage
var filterSelect=new FilterSelect('#select','#table');

<select id="select">
  <option>No filter</option>
  <option data-column-num="3" data-filter="E">Filter Label E</option>
  <option data-column-num="2" data-filter="Yes">Filter Available</option>
  <option data-column-num="3" data-filter="F">Filter Label F</option>
  <option data-column-num="2" data-filter="No">Filter Not Available</option>
</select>  

<table id="table">
  <tr>
    <td>1</td><td>One</td> <td>Yes</td><td>E</td>
  </tr>  
  <tr>
    <td>2</td><td>Two</td> <td>Yes</td><td>F</td>
  </tr>  
  <tr>
  <td>3</td><td>Three</td> <td>No</td><td>E</td>
  </tr>
</table>

关于数据属性的信息:

data-column-num - 要检查过滤器值的列数(从 0 开始)

data-filter - 用于检查由 columnNum 列选择的文本的过滤器值

以上组件启用按单列值过滤。这是可以过滤许多列的组件 - https://jsfiddle.net/maciejsikora/0kbubfts/