如何使用JavaScript中的select将两个过滤器融合到一个表中？

Question

我坚持使用我的页面，因为我在html中使用了两个不同的“选择”选项。我有我的脚本并且单独工作正常，但是当我尝试使用两个过滤器时，一个使另一个空白等等...请帮助我知道如何将这两个过滤器融合在一起工作。

$.getJSON("data.json", function(data){
    var items = [];
    $.each(data, function(key, val){
        items.push("<tr>");
        items.push("<td Sucursal= ''"+key+"''>"+val.nombreSucursal+"</td>");
        items.push("<td Ciudad= ''"+key+"''>"+val.direccion.municipio+"</td>");
        items.push("<td Lun-Sab= ''"+key+"''>"+val.horarios.Lun_Sab+"</td>");
        items.push("<td Domingo= ''"+key+"''>"+val.horarios.Domingo+"</td>");
        items.push("<td Horario= ''"+key+"''>"+val.horarios.horario+"</td>");
        items.push("<td Contacto= ''"+key+"''>"+val.contacto.telefono+"</td>");
        items.push("</tr>");
    });

    $("<tbody/>",{html: items.join("")}).appendTo("#tablita");
});

$('#filtro').change( function(e) {
    var letter = $(this).val();
    if (letter == 'ALL') {
        $('tr').show();
      }else {
        $('tr').each( function(rowIdx,tr) {
          $(this).hide().find('td').each( function(idx, td) {
            if(idx===0||idx===1||idx===2) {
              var check = $(this).text();
                if (check && check.indexOf(letter) == 0) {
                  $(tr).show();
                    }
                  }
                });
              });
            }
          });

          $('#filtro2').change( function(e) {
            var letter = $(this).val();
              if (letter == 'ALL') {
                  $ ('tr').show ();
              }
              else {
                  $('tr').each( function(rowIdx,tr) {
                      $(this).hide().find('td').each( function(idx, td) {
                          if(idx === 3) {
                              var check = $(this).text();
                              if (check && check.indexOf(letter) == 0) {
                                  $(tr).show();
                            }
                        }
                    });
                });
              }
          });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <!-- IDEA: estilos de pagina -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <LINK rel="StyleSheet" HREF="css/normalize.css"  >
    <LINK rel="StyleSheet" HREF="css/estilo.css"  >
    <LINK rel="StyleSheet" HREF="css/bootstrap.css"  >
    <LINK rel="StyleSheet" HREF="css/contact-buttons.css"  >
    <LINK rel="StyleSheet" HREF="css/demo.css"  >
    <LINK rel="StyleSheet" HREF="css/estiloReceta.css"  >
    <LINK rel="StyleSheet" HREF="css/estiloRegistro.css"  >
    <LINK rel="StyleSheet" HREF="css/inicio.css"  >
    <LINK rel="StyleSheet" HREF="css/jquery-ui.css"  >
    <title>Horarios</title>
    <!-- IDEA: CONTROLADORES DE LA PAGINA PRINCIPAL -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.5.5/angular-route.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="css/estiloReceta.css" rel="stylesheet" type="text/css">
    <script src="js/jspdf.min.js"></script>
    <script src="js/pdfFromHTML.js"></script>
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
                  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
                  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                <![endif]-->

    <!--<script>
        var miAplicacion = angular.module('SCH', []);
        miAplicacion.filter('unique', function () {
            return function (collection, keyname) {
                var output = [],
                        keys = [];

                angular.forEach(collection, function (item) {
                    var key = item[keyname];
                    if (keys.indexOf(key) === -1) {
                        keys.push(key);
                        output.push(item);
                    }
                });

                return output;
            };
        });
        miAplicacion.controller('controladorBD', ['$scope', function ($scope) {
                  $scope.sucursales = [

                ]
            }]);
    </script>-->
    <script>
        function cargaSeccion(div, fichero) {
            $('.' + div).fadeOut(50, function () {
                $('.' + div).html(fichero);
            });
            $('.' + div).fadeIn(50);
        }
    </script>
  </head>
  <header>
    <div class="header">
          <!--<img src="img/SHC.png" alt="Sucahersa" height="20%">-->
          <h1>SUCURSALES</h1>
    </div>
  </header>
  <body>
    <!-- IDEA: ".....................................................................................CONTROLADORES DE PAGINA ORIGINAL.................................." -->
    <script src="js/demo.js"></script>
    <div id="pdf2htmldiv" class="container-fluid cabecera">
        <center>
        </center>
    </div>
    <div class="container-fluid barmenu">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                    <a class="navbar-brand" href="../index.php">INICIO</a></div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="defaultNavbar1">


                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="../nosotros.html">QUIENES SOMOS</a></li>
                        <li><a href="catalogo.php">SUCURSALES</a></li>
                        <li><a href="../productos.php">PRODUCTOS MAYOREO</a></li>
                        <li><a href="../productos2.php">PRODUCTOS MENUDEO</a></li>
                        <li><a href="../recetas/catalogo.php">RECETARIO</a></li>
                        <li><a href="../contacto.html">CONTACTO</a></li>
                        <li><a href="../solicitud.html">BOLSA DE TRABAJO</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <!-- IDEA: ".....................................................FIN DE LOS CONTROLADORES............................................................................." -->

<div class="contenedor">
  <div class="filtrado">
    <h3 style= "padding-left: 40%; text-transform: uppercase; font-weight: bold; line-height: 40px; background-color: orange;">Fines de Semana</h3>
    <label for="buscador">Buscar: </label>

    <select class="" name="filtrado" id="filtro">
      <option value="">Ciudad</option>
      <option value="Salamanca">Salamanca</option>
      <option value="León">León</option>
      <option value="Celaya">Celaya</option>
      <option value="Moroleon">Moroleon</option>
      <option value="Cortazar">Cortazar</option>
      <option value="Juventino">Juventino Rosas</option>
      <option value="Guanajuato">Guanajuato</option>
      <option value="Irapuato">Irapuato</option>
      <option value="Julian">San Julian</option>
      <option value="Sialo">Sialo</option>
      <option value="Uriangato">Uriangato</option>
      <option value="Valle">Valle de Santiago</option>

    </select>
    <select class="" name="filtrado" id="filtro2">
      <option value="">Domingos</option>
      <option value="Si">Si</option>
      <option value="No">No</option>
    </select>

  </div>
  <div id="divtabla">
    <div id="divfondo">
      <table class="table table-bordered table-striped table-hover" id="tablita" >
        <thead> <!-- IDEA:cabecera de la tabla ----------------------------------------------------------->
          <tr>
            <th>Sucursal</th>
            <th>Ciudad</th>
            <th>Lun-Sab</th>
            <th>Domingo</th>
            <th>Horario</th>
            <th>Contacto</th>
          </tr>
        </thead>
        <tbody>
                   <!-- cuerpo de la tabla  --------------------------------------------------------------->
        </tbody>

      </table>
    </div>

  </div>
  <div>

      <center>
          <p class="derechos">® Super Carnicerías Hernández S.A. de C.V. Todos los Derechos Reservados 2018 .</p>

      </center>
  </div>
      </div>










      <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
      <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
      <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="js/jquery-ui.js"></script>
      <script type="text/javascript" src="js/jquery-ui_1.js"></script>
      <script type="text/javascript" src="js/script.js"></script>

      <script>


      </script>
  </body>
</html>