Select filter stopped working

Question

Select filter stopped working

Navigation

#1 by (2 votes)

2

Hello,

I 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 it 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>

javascript html jquery filter

asked by anonymous 28.04.2017 / 20:53

1 answer

Ruby - Printing zero as decimal place Retrieve all checked checkboxes

score 2 · Accepted Answer

You have the selectors half-mixed.

You are using ID in the selector, but the select has no ID, has name . It should be $('select[name="list_citys"]') .

In addition $(".list-citys").find("ul") does not make sense because ul is the element that has class .list-citys , not descending as .find() needs to find.

A working version might look 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