javascript - Filtering markers with leaflet/mapbox js -

i trying filter markers multiple dropdown menues using mapbox js , javascript. whenever select option dropdown menu of markers dissappear. filters dependent on each other. when select option dropdown should display markers in geojson matching dropdown input. data in geojson file. appreciated!

js:

var map = l.mapbox.map('map').setview([45.2858536, -83.8419731], 6)             l.esri.basemaplayer("oceans").addto(map);         l.esri.basemaplayer("oceanslabels").addto(map);  // load shipwreck data external file var shipwrecks = l.mapbox.featurelayer()   .loadurl('data/shipwrecks.geojson')      .addto(map);   $('#category_type_filter, #category_loss_filter').change(function() {     var cattype = $('#category_type_filter').val();     var catloss = $('#category_loss_filter').val();     shipwrecks.setfilter(function(f) {         return (cattype === 'all' || f.properties.name == cattype) &&             (catloss === 'all' || f.properties.type_of_loss === catloss);      });     return false; }); 

html:

<div class="container-fluid">     <div class="row">             <div class="sidebar col-xs-3">                         <h2>filter shipwrecks</h2>                         <div class="filter-options">                             <div class="filter-set" style="margin-top:0;">                                 <button id="load-btn" class="load-btn button is-success">reload data</button>                             </div>                             <div class="filter-set">                                 <label for="ship-select">ship type:</label>                                 <select id="category_type_filter" onchange="">                                 <option value="">any</option>                                 <option value="barge">barge</option>                                 <option value="freighter">freighter</option>                                 <option value="propeller">propeller</option>                                 <option value="schooner">schooner</option>                                 <option value="steamer">steamer</option>                                 </select>                             </div>                             <div class="filter-set">                                 <label for="ship-select">type of loss:</label>                                 <select id="category_loss_filter" onchange="">                                 <option value="">any</option>                                 <option value="collision">collision</option>                                 <option value="fire">fire</option>                                 <option value="intentional">intentional</option>                                 <option value="storm">storm</option>                                                                </select>                             </div> 

sample data:

{   "type": "featurecollection",   "features": [     {       "type": "feature",       "properties": {         "name": "bermuda",         "year": 1870,         "type": "schooner",         "type_of_loss": "storm"       },       "geometry": {         "type": "point",         "coordinates": [           -86.64683333,           46.46483333         ]       }     },     {       "type": "feature",       "properties": {         "name": "george",         "year": 1893,         "type": "schooner",         "type_of_loss": "storm"       },       "geometry": {         "type": "point",         "coordinates": [           -86.52083333,           46.516         ]       }     },