DataTables

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.12.0/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<p>
<label>Product Type</label>
<select id='dd_product'>
<option></option>
<option value='100'>Indoor</option>
<option value='200'>Outdoor</option>
<option value='300'>Electronics</option>
</select>
</p>
<table id="table">
<thead>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
</thead>
<tbody>
<tr data-product-id='100'><td>Wrench</td><td>$ 12</td></tr>
<tr data-product-id='200'><td>Shovel</td><td>$ 25</td></tr>
<tr data-product-id='300'><td>Multimeter</td><td>$ 68</td></tr>
<tr data-product-id='100'><td>Hammer</td><td>$ 17</td></tr>
<tr data-product-id='200'><td>Fertilizer</td><td>$ 22</td></tr>
<tr data-product-id='300'><td>S-100 Backplane</td><td>$ 41</td></tr>
</tbody>
</table>

JavaScript

var $tbl = $('#table');
                
        var tbl = $tbl.DataTable({"ordering":false});

            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    //
                    // If this Row matches our Product # Filter, leave it visible.
                    //
                   
        
            				let value = $('#dd_product').val();
                    
                    if( value === '') {
                    	return true;
                    }
                    
                    let api = new $.fn.dataTable.Api( '#table' );
                    
                    if ( $( api.row(dataIndex).node() ).data( 'product-id' ) == value)
                        return true;
                        
                return false;
                }
            );

        $('#dd_product').change(function () {
        
            //let value = $(this).val();

            //console.log(`Filtering for ${value}.`);
            //
            // Create Array of the Product #'s
            //
            /*
            let aProduct_Ids = $('tbody tr', $tbl).map(function (index, ele) {
                return ele.getAttribute('data-product-id');
            }).toArray();

					  console.table(aProduct_Ids);

            console.log(`Found ${aProduct_Ids.length} rows.`)

						*/

            tbl.draw();

        });