Filter a list of spans with jquery

Asked

Viewed 287 times

2

I needed it a little urgent, can you help? I need to filter a list of spans :

<div class="list-group pre-scrollable lista">
 <?php for($i = 0; $i < count($ambientes); $i++) { ?> 
     <span class="list-group-item listaAmbientes" value = '<?php echo 
 $ambientes[$i]->id_empresa ?>'>

        <div class="row">

          <div class="col-sm-8 col-md-9">
             <?php echo '('.$ambientes[$i]->id.') '.$ambientes[$i]->nome; ?>
          </div>

       </div>

      </span>
                    <?php } ?>
                </div>

The filter needs to be according to the value of a dropdown. This dropdown has id with the company value, 

  $( "#id_empresa" ).change(function() {
        let id_empresa = this.value;
        console.log(id_empresa);

        filtrarLista(id_empresa);
        });

Everything is working, I just need to write this method 'filterList' and update in html, I do not know how to do, if anyone can help me I appreciate!!

jquery list filter

2 answers

1


Use the implementation below to get the expected result.

$("#inputGroupSelect01").on("change", function(){
 filtrarLista(this);
});

function filtrarLista(element){
  var $element = $(element);
  var value = $element.val();
  
  if (value > 0){
    var selectorHide = "span[value!=" + $element.val() + "]";
    var selectorShow = "span[value=" + $element.val() + "]";
    $(selectorHide).hide();
    $(selectorShow).show();
  } else {
    var selector = "span[value]";
    $(selector).show();
  }
}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>


<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Selecione...</option>
    <option value="1">Um</option>
    <option value="2">Dois</option>
    <option value="3">Três</option>
  </select>
</div>


<div class="list-group pre-scrollable lista">
     <span class="list-group-item listaAmbientes" value="1">
        <div class="row">
          <div class="col-sm-8 col-md-9">
             Um
          </div>
       </div>
      </span>
       <span class="list-group-item listaAmbientes" value="2">
        <div class="row">
          <div class="col-sm-8 col-md-9">
             Dois
          </div>
       </div>
      </span>
       <span class="list-group-item listaAmbientes" value="3">
        <div class="row">
          <div class="col-sm-8 col-md-9">
             Três
          </div>
       </div>
      </span>
</div>

  • Thank you so much, you ran right here, you helped me the hell out!!

  • I would like to filter for more than one attribute, you can do something like this: (?) var selectorShow = "span[value=" + $element.val() + "] && span[code="+ code +"]"; "3"> <div class="Row"> <div class="col-Sm-8 col-Md-9"> Um </div> </div> </span>

  • Yes, you can use Jquery’s Multiple Attribute Selector feature (https://api.jquery.com/multiple-attribute-selector/)

  • Right guy, thanks. I found a character that helps too, is the ' '. It’s a startsWith, uses like this: span[value =" + value + "];. It’s very good for research.Maybe you already know, but it’s worth the intention

0

You can use the class .hidden Bootstrap Making a Loop .each in each span of the list:

$( "#id_empresa" ).change(function() {
   let id_empresa = this.value;
   console.log(id_empresa);
   
   $("div.list-group.lista span").each(function(i,e) {
      $(e).attr("value") != id_empresa ? $(e).addClass('hidden') : $(e).removeClass('hidden');
   });//;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<select id="id_empresa">
   <option value="">Selecione</option>
   <option value="1">Empresa 1</option>
   <option value="2">Empresa 2</option>
   <option value="3">Empresa 3</option>
</select>
<br />
<div class="list-group pre-scrollable lista">
   <span class="list-group-item listaAmbientes" value = '1'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 1
         </div>
      </div>
   </span>
   <span class="list-group-item listaAmbientes" value = '2'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 2
         </div>
      </div>
   </span>
   <span class="list-group-item listaAmbientes" value = '1'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 1
         </div>
      </div>
   </span>
   <span class="list-group-item listaAmbientes" value = '3'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 3
         </div>
      </div>
   </span>
</div>

Untitled .each

$( "#id_empresa" ).change(function() {
   let id_empresa = this.value;
   console.log(id_empresa);
   
   $("div.list-group.lista span[value='"+id_empresa+"']").removeClass('hidden');
   $("div.list-group.lista span[value!='"+id_empresa+"']").addClass('hidden');
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<select id="id_empresa">
   <option value="">Selecione</option>
   <option value="1">Empresa 1</option>
   <option value="2">Empresa 2</option>
   <option value="3">Empresa 3</option>
</select>
<br />
<div class="list-group pre-scrollable lista">
   <span class="list-group-item listaAmbientes" value = '1'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 1
         </div>
      </div>
   </span>
   <span class="list-group-item listaAmbientes" value = '2'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 2
         </div>
      </div>
   </span>
   <span class="list-group-item listaAmbientes" value = '1'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 1
         </div>
      </div>
   </span>
   <span class="list-group-item listaAmbientes" value = '3'>
      <div class="row">
         <div class="col-sm-8 col-md-9">
            empresa 3
         </div>
      </div>
   </span>
</div>

Browser other questions tagged jquery list filter

You are not signed in. Login or sign up in order to post.