Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jul 15th, 2012  |  syntax: None  |  size: 1.92 KB  |  hits: 17  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jquery hide show list elements with a select
  2. <select name="" id="estado_list">
  3.  <option value="0">-</option>
  4.  <option value="1">Nuevo León</option>
  5.  <option value="2">Puebla</option>
  6. </select>
  7.  
  8.  
  9. <ul style="list-style: none outside none;">
  10.  <li class="forli" id="1">data</li>
  11.  <li class="forli" id="1">data</li>
  12.  <li class="forli" id="1">data</li>
  13.  <li class="forli" id="1">data</li>
  14.  <li class="forli" id="1">data</li>
  15.  <li class="forli" id="1">data</li>
  16.  <li class="forli" id="2">data</li>
  17. </ul>
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  $(document).ready(function(){  
  25.         $("#estado_list").change(function(){  
  26.          var id = $(this).val();
  27.  
  28.           if (id == 0 ){$('.forli').show();}
  29.        else{$('.forli').hide();
  30.             $('li').each(function(){
  31.              $('#'+ id).show();
  32.  
  33.          });
  34.          }
  35.         });
  36.     });
  37.        
  38. <select name="" id="estado_list">
  39.  <option value="list0">-</option>
  40.  <option value="list1">Nuevo León</option>
  41.  <option value="list2">Puebla</option>
  42. </select>
  43.  
  44.  
  45. <ul style="list-style: none outside none;">
  46.  <li class="forli list1">data</li>
  47.  <li class="forli list1">data</li>
  48.  <li class="forli list1">data</li>
  49.  <li class="forli list1">data</li>
  50.  <li class="forli list1">data</li>
  51.  <li class="forli list1">data</li>
  52.  <li class="forli list2">data</li>
  53. </ul>
  54.  
  55.  
  56.  $(document).ready(function(){  
  57.    $("#estado_list").change(function(){  
  58.       $('.forli').hide().filter("."+$(this).val()).show();
  59.    });
  60.  });
  61.        
  62. <select id="estado_list">
  63.  <option value="zero">-</option>
  64.  <option value="one">Nuevo León</option>
  65.  <option value="two">Puebla</option>
  66. </select>
  67.  
  68. <ul>
  69.  <li class="forli one">1</li>
  70.  <li class="forli one">2</li>
  71.  <li class="forli one">3</li>
  72.  <li class="forli one">4</li>
  73.  <li class="forli one">5</li>
  74.  <li class="forli one">6</li>
  75.  <li class="forli two">7</li>
  76. </ul>​
  77.        
  78. $("#estado_list").on("change", function(e){
  79.     $("li.forli").each(function(){
  80.       $(this).toggle( $(this).hasClass( e.target.value ) );  
  81.     });
  82. });​