Guest User

Untitled

a guest
Jul 15th, 2012
33
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.92 KB | None | 0 0
  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. });​
Advertisement
Add Comment
Please, Sign In to add comment