Posted By

jsatt on 01/12/10


Tagged

select filter cascading Cascade


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

dubogii


Cascading Select boxes


 / Published in: jQuery
 

URL: http://jsatt.blogspot.com/2010/01/cascading-select-boxes-using-jquery.html

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  5. <script type="text/javascript" defer="defer">
  6. function cascadeSelect(parent, child){
  7. var childOptions = child.find('option:not(.static)');
  8. child.data('options',childOptions);
  9.  
  10. parent.change(function(){
  11. childOptions.remove();
  12. child
  13. .append(child.data('options').filter('.sub_' + this.value))
  14. .change();
  15. })
  16.  
  17. childOptions.not('.static, .sub_' + parent.val()).remove();
  18.  
  19. }
  20.  
  21. $(function(){
  22. cascadeForm = $('.cascadeTest');
  23. orgSelect = cascadeForm.find('.orgSelect');
  24. terrSelect = cascadeForm.find('.terrSelect');
  25. locSelect = cascadeForm.find('.locSelect');
  26.  
  27. cascadeSelect(orgSelect, terrSelect);
  28. cascadeSelect(terrSelect, locSelect);
  29. });
  30. </script>
  31. </head>
  32. <body>
  33. <form action="#" class="cascadeTest">
  34. <table>
  35. <tr>
  36. <th>Organization:</th>
  37. <td>
  38. <select name="orgSelect" class="orgSelect">
  39. <option value="0">Select an Organization</option>
  40. <option value="1">Organization 1</option>
  41. <option value="2">Organization 2</option>
  42. <option value="3">Organization 3</option>
  43. </select>
  44. </td>
  45. </tr>
  46. <tr>
  47. <th>Territory:</th>
  48. <td>
  49. <select name="terrSelect" class="terrSelect">
  50. <option value="0" class="static">- All Territories -</option>
  51. <option value="1" class="sub_1">Organization 1 - Territory 1</option>
  52. <option value="2" class="sub_1">Organization 1 - Territory 2</option>
  53. <option value="3" class="sub_2">Organization 2 - Territory 1</option>
  54. <option value="4" class="sub_2">Organization 2 - Territory 2</option>
  55. <option value="5" class="sub_3">Organization 3 - Territory 1</option>
  56. <option value="6" class="sub_3">Organization 3 - Territory 2</option>
  57. <option value="7" class="sub_3">Organization 3 - Territory 3</option>
  58. </select>
  59. </td>
  60. </tr>
  61. <tr>
  62. <th>Location:</th>
  63. <td>
  64. <select name="locSelect" class="locSelect">
  65. <option value="0" class="static">- All Locations -</option>
  66. <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 1</option>
  67. <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 2</option>
  68. <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 1</option>
  69. <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 2</option>
  70. <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 1</option>
  71. <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 2</option>
  72. <option value="4" class="sub_4">Organization 2 - Territory 2 - Location 1</option>
  73. <option value="5" class="sub_5">Organization 3 - Territory 1 - Location 1</option>
  74. <option value="6" class="sub_6">Organization 3 - Territory 2 - Location 1</option>
  75. <option value="7" class="sub_7">Organization 3 - Territory 3 - Location 1</option>
  76. </select>
  77. </td>
  78. </tr>
  79. </table>
  80. </form>
  81. </body>
  82. </html>

Report this snippet  

You need to login to post a comment.