Create a drop-down list with several options that contain custom filters

Question

I have already searched the Internet, but have not yet found a solution to my question. Perhaps I was looking for the wrong conditions, so I'm sorry that the solution to my problem can be very simple.

Example tables:

So, I want to do the following:

• provides a drop-down menu with several options.
• each parameter provides a custom filter (for example, "option1" shows all the records that are available, "option2" shows all the records that are available and have the label F, "option3" shows all the records that are available and have the label E, ...)
• apply the filter immediately live

So how can I achieve this?

Thanks in advance.

Answer 1

( js no Jquery) . .

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>

Hide result

:

data-column-num - ( 0)

data-filter - , columnNum

. - https://jsfiddle.net/maciejsikora/0kbubfts/