Select filter stopped working

Question

Hello,

Guys need a help, I have a select filter that until yesterday was working, someone moved and stopped working, as I do not understand much of jquery, I decided to ask here.

Note: The jquery file is still called normally.

When the user selects all cities, obviously the system lists everything, but when he clicks select one, only the result of the filtered city is displayed, the other Results are hidden.

Section 1 - Filter

<section id="citys">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <form>
          <div class="form-group">
            <label for="sel1">Cidade</label>
            <select class="form-control" name="list_citys">
              <option value="all_city">Todas</option>
              <option value="city_sp">São Paulo</option>
              <option value="city_barueri">Barueri (Tamboré)</option>
              <option value="city_campinas">Campinas</option>
              <option value="city_guaruja">Guarujá</option>
              <option value="city_santos">Santos</option>
              <option value="city_santo_andre">Santo Andre</option>
              <option value="city_sao_campo">São Bernado do Campo</option>
              <option value="city_sao_jose_campos">São José dos Campos</option>
              <option value="city_ribeirao_preto">Ribeirão Preto</option>
              <option value="city_outlet">Outlet</option>
            </select>
            <br>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

SECTION 2 - RESULT

<section class="list_citys_shop">
  <div class="container">
      <div class="col-md-3">
        <ul class="list-citys list-unstyled" data-category="city_sp">
          <li><h4 class="shop-text-h4">São Paulo - Centro</h4></li>
          <li class="new-citys" >Second item</li>
          <li class="new-citys">Third item</li>
        </ul>
      </div> 
      <div class="col-md-3">
        <ul class="list-citys list-unstyled" data-category="city_sp">
          <li><h4 class="shop-text-h4">São Paulo - Morumbi</h4></li>
          <li class="new-citys" >Second item</li>
          <li class="new-citys">Third item</li>
        </ul>
      </div> 
  </div>
  <div class="container">
      <div class="col-md-3">
        <ul class="list-citys list-unstyled" data-category="city_barueri">
          <li><h4 class="shop-text-h4">Barueri - Centro</h4></li>
          <li class="new-citys" >Second item</li>
          <li class="new-citys">Third item</li>
        </ul>
      </div> 
      <div class="col-md-3">
        <ul class="list-citys list-unstyled" data-category="city_barueri">
          <li><h4 class="shop-text-h4">Barueri - Tropical</h4></li>
          <li class="new-citys" >Second item</li>
          <li class="new-citys">Third item</li>
        </ul>
      </div> 
  </div>
</section>

Javascript

<script type="text/javascript">
$('select#list_citys').change(function() {
  var filter = $(this).val()
  filterList(filter);
});
function filterList(value) {
  var list = $(".list_citys_shop .new-citys");
  $(list).fadeOut("fast");
  if (value == "all_city") {
    $(".list-citys").find("ul").each(function (i) {
      $(this).delay(200).slideDown("fast");
    });
  } else {
    $(".list_citys_shop").find("ul[data-category*=" + value + "]").each(function (i) {
      $(this).delay(200).slideDown("fast");
    });
  }
}
</script>

Answer 1

You’ve got the dials mixed in half.

You are using ID on the selector, but select has no ID, it has name. Should be $('select[name="list_citys"]').

Besides $(".list-citys").find("ul") doesn’t make sense because ul is the element that has the class .list-citys, and not descending as the .find() need to find.

A working version could be like this:

$('select[name="list_citys"]').change(filterList);

function filterList(e) {
    var value = e.target.value;
    if (value == "all_city") $(".list_citys_shop .new-citys").slideDown();
    else $(".list_citys_shop .new-citys").slideUp();
    $(".list_citys_shop ul[data-category*=" + value + "] .new-citys").stop().slideDown();
}

Example: jsFiddle