CODEWITHSUNDEEP
jquery-selectorsshow-hide
morris
morris

Reputation: 23

jquery hide show list elements with a select

I'm stuck on something that I think should be easy... I've got a select that on change gets the id value and im tring to hide all and show th ones that with the same id value so it works just with the first any help me please

<select name="" id="estado_list">
 <option value="0">-</option>
 <option value="1">Nuevo León</option>
 <option value="2">Puebla</option>
</select>


<ul style="list-style: none outside none;">
 <li class="forli" id="1">data</li>
 <li class="forli" id="1">data</li>
 <li class="forli" id="1">data</li>
 <li class="forli" id="1">data</li>
 <li class="forli" id="1">data</li>
 <li class="forli" id="1">data</li>
 <li class="forli" id="2">data</li>
</ul>






 $(document).ready(function(){  
        $("#estado_list").change(function(){  
         var id = $(this).val();

          if (id == 0 ){$('.forli').show();}
       else{$('.forli').hide();
            $('li').each(function(){
             $('#'+ id).show();

         });
         }
        }); 
    });

Upvotes: 2

Views: 1218

Answers (2)

Sampson
Sampson

Reputation: 268344

You should modify your markup so as to not use numbers for id values, as well as not use the same id over and over. I would encourage you to make further use of class values:

<select id="estado_list">
 <option value="zero">-</option>
 <option value="one">Nuevo León</option>
 <option value="two">Puebla</option>
</select>

<ul>
 <li class="forli one">1</li>
 <li class="forli one">2</li>
 <li class="forli one">3</li>
 <li class="forli one">4</li>
 <li class="forli one">5</li>
 <li class="forli one">6</li>
 <li class="forli two">7</li>
</ul>​

Once you've done this, you can filter the the results when your select changes:

$("#estado_list").on("change", function(e){
    $("li.forli").each(function(){
      $(this).toggle( $(this).hasClass( e.target.value ) );  
    });
});​

Demo: http://jsfiddle.net/JtFvK/1/

Upvotes: 1

GrayB
GrayB

Reputation: 1000

Id fields should be unique and will cause problems when accessed from the DOM object. Try using the class field instead.

<select name="" id="estado_list">
 <option value="list0">-</option>
 <option value="list1">Nuevo León</option>
 <option value="list2">Puebla</option>
</select>


<ul style="list-style: none outside none;">
 <li class="forli list1">data</li>
 <li class="forli list1">data</li>
 <li class="forli list1">data</li>
 <li class="forli list1">data</li>
 <li class="forli list1">data</li>
 <li class="forli list1">data</li>
 <li class="forli list2">data</li>
</ul>


 $(document).ready(function(){  
   $("#estado_list").change(function(){  
      $('.forli').hide().filter("."+$(this).val()).show();
   });
 });

Upvotes: 0

Related Questions