├── README.markdown
├── datasupplier.htm
├── datasupplier.php
├── index.htm
└── src
    ├── jquery.relatedselects.js
    └── jquery.relatedselects.min.js


/README.markdown:
--------------------------------------------------------------------------------
 1 | # jQuery Related Selects
 2 | 
 3 | Demos @ [http://www.erichynds.com/examples/jquery-related-selects/](http://www.erichynds.com/examples/jquery-related-selects/)  
 4 | jQuery project page @ [http://plugins.jquery.com/project/related-selects](http://plugins.jquery.com/project/related-selects)  
 5 | Blog post/comments @ [http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/](http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/)  
 6 | 
 7 | jQuery Related Selects is a plugin that allows you to create any number of select boxes whose options are determined upon the selected value of another.  
 8 | You pass an array or object of select box names, and the select boxes will depend on each other in the order in which they are passed in.
 9 | 
10 | When a select box is changed an AJAX request is sent to the file specified in the onChangeLoad property, passing the selected value of each select box
11 | as parameters.  The data must be returned in either JSON or HTML format.  An <option> must have a legitimate value in order to trigger the script.  An <option>
12 | where the value is blank (value="") is used for the defaultOptionText option (see below).
13 | 
14 | This script provides a high level of customization.  You can set the options once for each select to use, or set the options on a select-by-select basis.
15 | You can also start your markup with pre-populated options and selected values.
16 | 
17 | ### Usage
18 | 
19 | A basic example.  Changing the "stateID" select updates the "countyID" select and so on.  The values of all four select
20 | boxes are serialized and passed to datasupplier.php, which returns data for the next select box in JSON format (default).
21 | 
22 | 	<form>
23 | 		<select name="stateID">
24 | 		<option value="">Choose State</option>
25 | 		<option value="MA">Massachusetts</option>
26 | 		<option value="VT">Vermont</option>
27 | 		</select>
28 | 		<select name="countyID"><option value="">Choose County</option></select>
29 | 		<select name="townID"><option value="">Choose Town</option></select>
30 | 		<select name="villageID"><option value="">Choose Village</option></select>
31 | 	</form>
32 | 
33 | 	$("form").relatedSelects({
34 | 		onChangeLoad: 'datasupplier.php',
35 | 		selects: ['stateID', 'countyID', 'townID', 'villageID']
36 | 	});
37 | 	
38 | ### Options
39 | 
40 | > selects
41 | 
42 | Required.  An array or object of select boxes you want to be dependent.  Each one will depend on each other **in the order in which they are passed in.**  If you want to 
43 | override any of the options below on a select-by-select basis you can pass this as an object.  See examples.
44 | 
45 | > dataType
46 | 
47 | The type of data the server will return.  Either 'json' or 'html'.
48 | 
49 | > onChangeLoad
50 | 
51 | Required.  The file to call to retrieve data when a select box is changed.
52 | 
53 | > loadingMessage
54 | 
55 | Optional.  The text to change the sibling select box to during the AJAX request.  Defaults to &quot;Loading, please wait...&quot;.
56 | 
57 | > defaultOptionText
58 | 
59 | Optional.  The text inside the default <option> tag after AJAX populates a select box.  This is typically the text where you instruct the user
60 | to choose an option.  If this option is not provided and an <option> tag with a blank value attribute exists in your markup, that text will be used.
61 | 
62 | > disableIfEmpty
63 | 
64 | Optional.  Keep select2 disabled if select1 does not return any results.  Defaults to false.  Also see the onEmptyResult callback.
65 | 
66 | > onLoadingStart
67 | 
68 | Optional.  A callback to fire when the AJAX call starts.
69 | 
70 | > onLoadingEnd
71 | 
72 | Optional.  A callback to fire when the AJAX call ends.
73 | 
74 | > onChange
75 | 
76 | Optional.  A callback to fire when a select box is changed.
77 | 
78 | > onEmptyResult
79 | 
80 | Optional.  A callback to fire when no results are returned after changing a select.
81 | 


--------------------------------------------------------------------------------
/datasupplier.htm:
--------------------------------------------------------------------------------
 1 | <optgroup label="Northern">
 2 | 	<option value="1">Trinity</option>
 3 | 	<option value="2">Modoc</option>
 4 | 	<option value="3">Shasta</option>
 5 | </optgroup>
 6 | <optgroup label="Central">
 7 | 	<option value="1">Santa Cruz</option>
 8 | 	<option value="2">Santa Clara</option>
 9 | 	<option value="3">Madera</option>
10 | </optgroup>
11 | 


--------------------------------------------------------------------------------
/datasupplier.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 
 3 | // simulate that this proccess might take a while so you can see the loadingMessage option work.
 4 | sleep(1);
 5 | 
 6 | $stateID = $_GET['stateID'];
 7 | $countyID = $_GET['countyID'];
 8 | $townID = $_GET['townID'];
 9 | $html = $_GET['html'];
10 | 
11 | $states = array();
12 | $states['MA'] = "Massachusetts";
13 | $states['VT'] = "Vermont";
14 | $states['SC'] = "South Carolina";
15 | 
16 | 
17 | $counties = array();
18 | $counties['MA']['BARN'] = 'Barnstable';
19 | $counties['MA']['PLYM'] = 'Plymouth';
20 | $counties['VT']['CHIT'] = 'Chittenden';
21 | $counties['SC']['ANDE'] = 'Anderson';
22 | 
23 | $towns = array();
24 | $towns['MA']['BARN']['CHA'] = "Chatham";
25 | $towns['MA']['BARN']['DEN'] = "Dennis";
26 | $towns['MA']['BARN']['YAR'] = "Yarmouth";
27 | $towns['MA']['PLYM']['BRI'] = "Bridgewater";
28 | $towns['MA']['PLYM']['MAR'] = "Marshfield";
29 | $towns['MA']['PLYM']['WAR'] = "Wareham";
30 | $towns['VT']['CHIT']['BUR'] = "Burlington";
31 | $towns['VT']['CHIT']['ESS'] = "Essex";
32 | 
33 | $villages = array();
34 | $villages['MA']['BARN']['CHA']['CCHA'] = 'Chatham';
35 | $villages['MA']['BARN']['CHA']['SCHA'] = 'South Chatham';
36 | $villages['MA']['BARN']['CHA']['NCHA'] = 'North Chatham';
37 | $villages['MA']['BARN']['CHA']['WCHA'] = 'West Chatham';
38 | $villages['MA']['BARN']['CHA']['CHAP'] = 'Chatham Port';
39 | $villages['MA']['BARN']['DEN']['CDEN'] = 'Dennis';
40 | $villages['MA']['BARN']['DEN']['SDEN'] = 'South Dennis';
41 | $villages['MA']['BARN']['DEN']['WDEN'] = 'West Dennis';
42 | $villages['MA']['BARN']['DEN']['EDEN'] = 'East Dennis';
43 | $villages['MA']['BARN']['DEN']['DENP'] = 'Dennis Port';
44 | $villages['MA']['BARN']['YAR']['CYAR'] = 'Yarmouth';
45 | $villages['MA']['BARN']['YAR']['SYAR'] = 'South Yarmouth';
46 | $villages['MA']['BARN']['YAR']['WYAR'] = 'West Yarmouth';
47 | $villages['MA']['BARN']['YAR']['BASS'] = 'Bass River';
48 | $villages['MA']['BARN']['YAR']['YPOR'] = 'Yarmouth Port';
49 | $villages['MA']['PLYM']['BRI']['STAN'] = 'Stanley';
50 | $villages['MA']['PLYM']['BRI']['SCOT'] = 'Scotland';
51 | $villages['MA']['PLYM']['BRI']['PMVI'] = 'Paper Mill Village';
52 | $villages['MA']['PLYM']['BRI']['SBRI'] = 'South Bridgewater';
53 | $villages['MA']['PLYM']['MAR']['ROCK'] = 'Brant Rock';
54 | $villages['MA']['PLYM']['MAR']['GHAR'] = 'Green Harbor';
55 | $villages['MA']['PLYM']['MAR']['HILL'] = 'Marshfield Hills';
56 | $villages['MA']['PLYM']['MAR']['BLUF'] = 'Ocean Bluff';
57 | $villages['MA']['PLYM']['WAR']['ONSE'] = 'Onset';
58 | $villages['MA']['PLYM']['WAR']['WCEN'] = 'Wareham Center';
59 | $villages['MA']['PLYM']['WAR']['WESW'] = 'West Wareham';
60 | $villages['MA']['PLYM']['WAR']['WEWN'] = 'Weweantic';
61 | $villages['VT']['CHIT']['BUR']['BURL'] = 'Burlington';
62 | $villages['VT']['CHIT']['BUR']['SBUR'] = 'South Burlington';
63 | $villages['VT']['CHIT']['ESS']['ESSE'] = 'Essex';
64 | $villages['VT']['CHIT']['ESS']['ESSJ'] = 'Essex Junction';
65 | $villages['VT']['CHIT']['ESS']['JERI'] = 'Jerico';
66 | 
67 | 
68 | if($stateID && !$countyID && !$townID){
69 | 	echo json_encode( $counties[$stateID] );
70 | } elseif( $stateID && $countyID && !$townID ) {
71 | 	echo json_encode( $towns[$stateID][$countyID] );
72 | } elseif( isset($villages[$stateID][$countyID][$townID]) ) {
73 | 	echo json_encode( $villages[$stateID][$countyID][$townID] );
74 | } else {
75 | 	echo '{}';
76 | }
77 | 
78 | ?>
79 | 
80 | 
81 | 


--------------------------------------------------------------------------------
/index.htm:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5 | <title>jQuery Related Selects</title>
  6 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  7 | <script src="src/jquery.relatedselects.min.js" type="text/javascript"></script>
  8 | 
  9 | <style type="text/css">
 10 | body { font:12px helvetica, arial, sans-serif; }
 11 | </style>
 12 | 
 13 | <script type="text/javascript">
 14 | $(function(){
 15 | 
 16 | 	$("#example-1, #example-3").relatedSelects({
 17 | 		onChangeLoad: 'datasupplier.php',
 18 | 		defaultOptionText: 'Choose an Option',
 19 | 		selects: {
 20 | 			'stateID':		{ loadingMessage:'Loading Counties...' },
 21 | 			'countyID':		{ loadingMessage:'Loading Towns...' },
 22 | 			'townID':		{ loadingMessage:'Loading Villages...' },
 23 | 			'villageID':	{}
 24 | 		}
 25 | 	});
 26 | 	
 27 | 	$("#example-2").relatedSelects({
 28 | 		onChangeLoad: 'datasupplier.php',
 29 | 		loadingMessage: 'Please wait',
 30 | 		selects: ['stateID', 'countyID', 'townID', 'villageID']
 31 | 	});
 32 | 	
 33 | 	$("#example-4").relatedSelects({
 34 | 		onChangeLoad: 'datasupplier.php',
 35 | 		selects: ['stateID', 'countyID']
 36 | 	});
 37 | 
 38 | 	$("#example-5").relatedSelects({
 39 | 		onChangeLoad: 'datasupplier.php',
 40 | 		selects: ['stateID', 'countyID'],
 41 | 		onChange: function(){
 42 | 			// 'this' is a reference to the changed select box
 43 | 			alert( $(this).attr('name') + ' changed!');
 44 | 		},
 45 | 		onLoadingStart: function(){
 46 | 			// 'this' is a reference to the sibling select box that just had data loaded into it.
 47 | 			$(this).siblings('div').html("Loading, please wait...");
 48 | 		},
 49 | 		onLoadingEnd: function(){
 50 | 			// 'this' is a reference to the sibling select box that just had data loaded into it.
 51 | 			$(this).siblings('div').html("Please choose an option above.");
 52 | 		}
 53 | 	});
 54 | 	
 55 | 	$("#example-6").relatedSelects({
 56 | 		onChangeLoad: 'datasupplier.php',
 57 | 		loadingMessage: 'Please wait',
 58 | 		selects: ['stateID', 'countyID','townID'],
 59 | 		disableIfEmpty:true,
 60 | 		onEmptyResult: function(){
 61 | 			// 'this' is a reference to the changed select box
 62 | 			alert('Unable to find any matches for ' + $(this).find('option:selected').text() + '!');
 63 | 		}
 64 | 	});
 65 | 	
 66 | 	$("#example-7").relatedSelects({
 67 | 		onChangeLoad: 'datasupplier.htm',
 68 | 		dataType: 'html',
 69 | 		selects: ['stateID', 'countyID']
 70 | 	});
 71 | });
 72 | </script>
 73 | 
 74 | </head>
 75 | 
 76 | <body>
 77 | 
 78 | <h1>jQuery Related Selects Plugin</h1>
 79 | 
 80 | <ul>
 81 | <li><a href="http://github.com/ehynds/jquery-related-selects">Documentation &amp; download</a> at GitHub</li>
 82 | <li>My original <a href="http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/">blog post and comments</a></li>
 83 | </ul>
 84 | 
 85 | <p>Note that in examples 1-6, the file that supplies the data <b>pauses for 1 second</b> so you can see the loading messages.</p>
 86 | 
 87 | <h2>Example 1</h2>
 88 | <p>The state select is pre-populated, and the rest will populate based on preceding values.  Each select is configured with a custom loading message, and the default option text is set to &quot;Choose an Option&quot;.</p>
 89 | <form id="example-1">
 90 | 	<select name="stateID">
 91 | 	<option value="">Choose State &raquo;</option>
 92 | 	<option value="MA">Massachusetts</option>
 93 | 	<option value="VT">Vermont</option>
 94 | 	</select>
 95 | 
 96 | 	<select name="countyID">
 97 | 	<option value="">Choose County &raquo;</option>
 98 | 	</select>
 99 | 
100 | 	<select name="townID">
101 | 	<option value="">Choose Town &raquo;</option>
102 | 	</select>
103 | 
104 | 	<select name="villageID">
105 | 	<option value="">Choose Village &raquo;</option>
106 | 	</select>
107 | </form>
108 | 
109 | <h2>Example 2</h2>
110 | <p>The state and county selects are pre-populated and legitimate values are selected.  Since the 'County' select already has a selected option,
111 | the 'Town' select automatically populates. Individual selects do not have any custom settings.  No defaultOptionText override.</p>
112 | <form id="example-2">
113 | 	<select name="stateID">
114 | 	<option value="">Choose State &raquo;</option>
115 | 	<option value="MA" selected="selected">Massachusetts</option>
116 | 	<option value="VT">Vermont</option>
117 | 	</select>
118 | 
119 | 	<select name="countyID">
120 | 	<option value="">Choose County &raquo;</option>
121 | 	<option value="BARN" selected="selected">Barnstable</option>
122 | 	</select>
123 | 
124 | 	<select name="townID">
125 | 	<option value="">Choose Town &raquo;</option>
126 | 	</select>
127 | 	
128 | 	<select name="villageID">
129 | 	<option value="">Choose Village &raquo;</option>
130 | 	</select>
131 | </form>
132 | 
133 | 
134 | <h2>Example 3</h2>
135 | <p>The state select is populated, and the HTML structure of the other three are completely empty when the page loads.</p>
136 | <form id="example-3">
137 | 	<select name="stateID">
138 | 	<option value="">Choose State &raquo;</option>
139 | 	<option value="MA">Massachusetts</option>
140 | 	<option value="VT">Vermont</option>
141 | 	</select>
142 | 
143 | 	<select name="countyID"></select>
144 | 
145 | 	<select name="townID"></select>
146 | 
147 | 	<select name="villageID"></select>
148 | </form>
149 | 
150 | <h2>Example 4</h2>
151 | <p>Basic, just two selects.</p>
152 | <form id="example-4">
153 | 	<select name="stateID">
154 | 	<option value="">Choose State &raquo;</option>
155 | 	<option value="MA">Massachusetts</option>
156 | 	<option value="VT">Vermont</option>
157 | 	</select>
158 | 
159 | 	<select name="countyID">
160 | 	<option value="">Choose County &raquo;</option>
161 | 	</select>
162 | </form>
163 | 
164 | <h2>Example 5</h2>
165 | <p>Using the onChange, onLoadingStart &amp; onLoadingEnd callbacks.</p>
166 | <form id="example-5">
167 | 	<select name="stateID">
168 | 	<option value="">Choose State &raquo;</option>
169 | 	<option value="MA">Massachusetts</option>
170 | 	<option value="VT">Vermont</option>
171 | 	</select>
172 | 
173 | 	<select name="countyID">
174 | 	<option value="">Choose County &raquo;</option>
175 | 	</select>
176 | 	
177 | 	<div><!-- placeholder for our callback message --></div>
178 | </form>
179 | 
180 | <h2>Example 6</h2>
181 | <p>Using the DisableIfEmpty option &amp; the onEmptyResult callback.</p>
182 | <form id="example-6">
183 | 	<select name="stateID">
184 | 	<option value="">Choose State &raquo;</option>
185 | 	<option value="TX">Texas</option>
186 | 	<option value="SC">South Carolina</option>
187 | 	</select>
188 | 
189 | 	<select name="countyID">
190 | 	<option value="">Choose County &raquo;</option>
191 | 	</select>
192 | 	
193 | 	<select name="townID">
194 | 	<option value="">Choose Town &raquo;</option>
195 | 	</select>
196 | 	
197 | 	<div></div>
198 | </form>
199 | 
200 | 
201 | <h2>Example 7</h2>
202 | <p>Retreiving data in HTML format instead of JSON.  This option gives you more control of the options, like the ability to add optgroups.  <a href="datasupplier.htm">View the data file.</a></p>
203 | <form id="example-7">
204 | 	<select name="stateID">
205 | 	<option value="">Choose State &raquo;</option>
206 | 	<option value="CA">California</option>
207 | 	</select>
208 | 
209 | 	<select name="countyID">
210 | 	<option value="">Choose County &raquo;</option>
211 | 	</select>
212 | </form>
213 | 
214 | </body>
215 | </html>
216 | 
217 | 


--------------------------------------------------------------------------------
/src/jquery.relatedselects.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * jQuery Related Selects plug-in 1.1
  3 |  *
  4 |  * http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/
  5 |  * http://github.com/ehynds/jquery-related-selects
  6 |  *
  7 |  * Copyright (c) 2009 Eric Hynds
  8 |  *
  9 |  * Dual licensed under the MIT and GPL licenses:
 10 |  *   http://www.opensource.org/licenses/mit-license.php
 11 |  *   http://www.gnu.org/licenses/gpl.html
 12 |  */
 13 | 
 14 | (function($){
 15 | 	$.fn.relatedSelects = function(opts){
 16 | 		opts = $.extend({}, $.fn.relatedSelects.defaults, opts);
 17 | 	
 18 | 		return this.each(function(){
 19 | 			new RelatedSelect(this, opts);
 20 | 		});
 21 | 	};
 22 | 
 23 | 	var RelatedSelect = function(context, opts) {
 24 | 		var $context = $(context), selects = [];
 25 | 	
 26 | 		// if the selects option is an array convert it to an object
 27 | 		if($.isArray(opts.selects)){
 28 | 			selectsToObj();
 29 | 		}
 30 | 		
 31 | 		// make array of select names
 32 | 		$.each(opts.selects, function(){
 33 | 			selects.push(key);
 34 | 		});
 35 | 		
 36 | 		// cache the options where the value is empty for each select before processing occurs.
 37 | 		saveDefaultOptionText(); 
 38 | 	
 39 | 		// go through each select box & settings passed into options
 40 | 		$.each(opts.selects, function(elem,o){
 41 | 			var $select = $context.find("select[name='" + elem + "']"), // jquery ref to this select box
 42 | 				$next = next(elem), // the select box after this one
 43 | 				selectedValue = $select.val(); // currently selected value
 44 | 		
 45 | 			// extend element-specific options
 46 | 			// set the defaultOptionText to whatever was passed in or the option where value is blank.
 47 | 			o = $.extend({
 48 | 				defaultOptionText: opts.defaultOptionText || $select.data('defaultOption') 
 49 | 			}, opts, o);
 50 | 		
 51 | 			// store the new default option text
 52 | 			$select.data('defaultOption', o.defaultOptionText);
 53 | 
 54 | 			// bind the change event
 55 | 			$select.change(function(){
 56 | 				o.onChange.call($select);
 57 | 				process( $select, $next, elem, o );
 58 | 			});
 59 | 	
 60 | 			// if there is already a selected option in this select and the next one is already populated, skip this iteration
 61 | 			if(selectedValue && selectedValue.length > 0 && isPopulated($next)){
 62 | 				return;
 63 | 			}
 64 | 			
 65 | 			// process the select box upon page load
 66 | 			process( $select, $next, elem, o );
 67 | 		});
 68 | 		
 69 | 		function saveDefaultOptionText(){
 70 | 			var $select, text;
 71 | 			
 72 | 			for(var x=1, len=selects.length; x<len; x++){
 73 | 				$select = $context.find("select[name='"+ selects[x] +"']");
 74 | 				text = $select.find("option[value='']").text();
 75 | 				$select.data('defaultOption', text);
 76 | 			}
 77 | 		}
 78 | 		
 79 | 		function process($select,$next,elem,o){
 80 | 			if(!$next.length){
 81 | 				return;
 82 | 			}
 83 | 			
 84 | 			var value = $.trim($select.val());
 85 | 		
 86 | 			// if this select box's length has been changed to a legit value, and there is another select box after this one
 87 | 			if(value.length > 0 && value !== o.loadingMessage && $next){
 88 | 			
 89 | 				// reset all selects after this one
 90 | 				resetAfter(elem);
 91 | 			
 92 | 				// populate the next select
 93 | 				populate($select,$next,o);
 94 | 			
 95 | 			// otherwise, make all the selects after this one disabled and select the first option
 96 | 			} else if($next){
 97 | 				resetAfter(elem);
 98 | 			}
 99 | 		}
100 | 		
101 | 		function populate($caller,$select,o){
102 | 			var selectors = [], params;
103 | 		
104 | 			// build a selector for each select box in this context
105 | 			for(var x=0, len=selects.length; x<len; x++){
106 | 				selectors.push('select[name="'+selects[x]+'"]');
107 | 			}
108 | 		
109 | 			// take those selectors and serialize the data in them
110 | 			params = $( selectors.join(','), $context ).serialize();
111 | 		
112 | 			// disable this select box, add loading msg
113 | 			$select.attr('disabled', 'disabled').html('<option value="">' + o.loadingMessage + '</option>');
114 | 		
115 | 			// perform ajax request
116 | 			$.ajax({
117 | 				beforeSend: function(){ o.onLoadingStart.call($select); },
118 | 				complete: function(){ o.onLoadingEnd.call($select); },
119 | 				dataType: o.dataType,
120 | 				data: params,
121 | 				url: o.onChangeLoad,
122 | 				success: function(data){
123 | 					var html = [], defaultOptionText = $select.data('defaultOption');
124 | 					
125 | 					// set the default option in the select.
126 | 					if(defaultOptionText.length > 0){
127 | 						html.push('<option value="" selected="selected">' + defaultOptionText + '</option>');
128 | 					}
129 | 					
130 | 					// if the value returned from the ajax request is valid json and isn't empty
131 | 					if(o.dataType === 'json' && typeof data === 'object' && data){
132 | 					
133 | 						// build the options
134 | 						$.each(data, function(i,item){
135 | 							html.push('<option value="'+i+'">' + item + '</option>');
136 | 						});
137 | 
138 | 						$select.html( html.join('') ).removeAttr('disabled');
139 | 				
140 | 					// html datatype
141 | 					} else if(o.dataType === 'html' && $.trim(data).length > 0){
142 | 						html.push($.trim(data));
143 | 						$select.html( html.join('') ).removeAttr('disabled');
144 | 				
145 | 					// if the response is invalid/empty, reset the default option and fire the onEmptyResult callback
146 | 					} else {
147 | 						$select.html( html.join('') );
148 | 						if(!o.disableIfEmpty){ $select.removeAttr('disabled'); }
149 | 						o.onEmptyResult.call($caller);
150 | 					}
151 | 				}
152 | 			});
153 | 		}
154 | 	
155 | 		function isPopulated($select){
156 | 			var options = $select.find('option');
157 | 			return (options.length === 0 || (options.length === 1 && options.filter(':first').attr('value').length === 0)) ? false : true;
158 | 		}
159 | 		
160 | 		function resetAfter(elem){
161 | 			var thispos = getPosition(elem);
162 | 			for (var x=thispos+1, len=selects.length; x<len; x++){
163 | 				$("select[name='" + selects[x] + "']", $context ).attr('disabled','disabled').find('option:first').attr('selected','selected');
164 | 			}
165 | 		}
166 | 		
167 | 		function next(elem){
168 | 			return $context.find("select[name='" + selects[ getPosition(elem)+1 ] + "']");
169 | 		}
170 | 		
171 | 		// returns the position of an element in the array
172 | 		function getPosition(elem){
173 | 			for (var i=0, len=selects.length; i<len; i++){
174 | 				if(selects[i] === elem){ 
175 | 					return i; 
176 | 				}
177 | 			}
178 | 		}
179 | 		
180 | 		// converts an array of selects to an object
181 | 		function selectsToObj(){
182 | 			var arrSelects = opts.selects;
183 | 			opts.selects = {};
184 | 			for(var i=0, len=arrSelects.length; i<len; i++){
185 | 				opts.selects[ arrSelects[i] ] = {};
186 | 			}
187 | 		}
188 | 	};
189 | 
190 | 	$.fn.relatedSelects.defaults = {
191 | 		selects: {},
192 | 		loadingMessage: 'Loading, please wait...',
193 | 		disableIfEmpty: false,
194 | 		dataType: 'json',
195 | 		onChangeLoad: '',
196 | 		onLoadingStart: function(){},
197 | 		onLoadingEnd: function(){},
198 | 		onChange: function(){},
199 | 		onEmptyResult: function(){}
200 | 	};
201 | 
202 | })(jQuery);
203 | 
204 | 


--------------------------------------------------------------------------------
/src/jquery.relatedselects.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * jQuery Related Selects plug-in 1.0
 3 |  *
 4 |  * http://www.erichynds.com/jquery/jquery-related-dependent-selects-plugin/
 5 |  * http://github.com/ehynds/jquery-related-selects
 6 |  *
 7 |  * Copyright (c) 2009 Eric Hynds
 8 |  *
 9 |  * Dual licensed under the MIT and GPL licenses:
10 |  *   http://www.opensource.org/licenses/mit-license.php
11 |  *   http://www.gnu.org/licenses/gpl.html
12 |  */
13 | (function(d){d.fn.relatedSelects=function(j){j=d.extend({},d.fn.relatedSelects.defaults,j);return this.each(function(){new q(this,j)})};var q=function(j,h){function r(){for(var b,a,c=1,f=g.length;c<f;c++){b=k.find("select[name='"+g[c]+"']");a=b.find("option[value='']").text();b.data("defaultOption",a)}}function m(b,a,c,f){if(a.length){var e=d.trim(b.val());if(e.length>0&&e!==f.loadingMessage&&a){n(c);s(b,a,f)}else a&&n(c)}}function s(b,a,c){var f=[],e=[];e=0;for(var t=g.length;e<t;e++)f.push('select[name="'+ g[e]+'"]');e=d(f.join(","),k).serialize();a.attr("disabled","disabled").html('<option value="">'+c.loadingMessage+"</option>");d.ajax({beforeSend:function(){c.onLoadingStart.call(a)},complete:function(){c.onLoadingEnd.call(a)},dataType:c.dataType,data:e,url:c.onChangeLoad,success:function(l){var i=[],o=a.data("defaultOption");o.length>0&&i.push('<option value="" selected="selected">'+o+"</option>");if(c.dataType==="json"&&typeof l==="object"&&l){d.each(l,function(u,v){i.push('<option value="'+u+'">'+ v+"</option>")});a.html(i.join("")).removeAttr("disabled")}else if(c.dataType==="html"&&d.trim(l).length>0){i.push(d.trim(l));a.html(i.join("")).removeAttr("disabled")}else{a.html(i.join(""));c.disableIfEmpty||a.removeAttr("disabled");c.onEmptyResult.call(b)}}})}function w(b){b=b.find("option");return b.length===0||b.length===1&&b.filter(":first").attr("value").length===0?false:true}function n(b){b=p(b)+1;for(var a=g.length;b<a;b++)d("select[name='"+g[b]+"']",k).attr("disabled","disabled").find("option:first").attr("selected", "selected")}function x(b){return k.find("select[name='"+g[p(b)+1]+"']")}function p(b){for(var a=0,c=g.length;a<c;a++)if(g[a]===b)return a}function y(){var b=h.selects;h.selects={};for(var a=0,c=b.length;a<c;a++)h.selects[b[a]]={}}var k=d(j),g=[];d.isArray(h.selects)&&y();for(var z in h.selects)g.push(z);r();d.each(h.selects,function(b,a){var c=k.find("select[name='"+b+"']"),f=x(b),e=c.val();a=d.extend({defaultOptionText:h.defaultOptionText||c.data("defaultOption")},h,a);c.data("defaultOption",a.defaultOptionText); c.change(function(){a.onChange.call(c);m(c,f,b,a)});e&&e.length>0&&w(f)||m(c,f,b,a)})};d.fn.relatedSelects.defaults={selects:{},loadingMessage:"Loading, please wait...",disableIfEmpty:false,dataType:"json",onChangeLoad:"",onLoadingStart:function(){},onLoadingEnd:function(){},onChange:function(){},onEmptyResult:function(){}}})(jQuery);
14 | 


--------------------------------------------------------------------------------