Filter a list of spans with jquery

Navigation
2

I needed this 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 must match 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 it, if anyone can help me, I would appreciate it !!

    
asked by anonymous 02.01.2018 / 12:19

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><linkhref="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><divclass="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>
    
02.01.2018 / 13:19
0

You can use the .hidden of Bootstrap class by looping .each on 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><linkrel="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>

No loop .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><linkrel="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>
    
02.01.2018 / 13:56
Why do not Booleans have a common class in Ruby? Visual Studio Error - Can not find name 'Record'