advanced code snippet search

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

Creative Commons Attribution-Share Alike 3.0 Unported License

Expand | Embed | Plain Text 
  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.