- jquery hide show list elements with a select
- <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();
- });
- }
- });
- });
- <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();
- });
- });
- <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>
- $("#estado_list").on("change", function(e){
- $("li.forli").each(function(){
- $(this).toggle( $(this).hasClass( e.target.value ) );
- });
- });