Question

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();

         });
         }
        }); 
    });  

Answer 1

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();
   });
 });