Small jQuery plugin to filter a child <select> based on a parent <select>.

filterSelectByParent.js

/*

Based on: http://stackoverflow.com/a/878331

Filter child select from selected parent select option.
Will look for parent (options) value in child data-parent"XX".

<select id="parent">
	<option value="1">Group 1</option>
	<option value="2">Group 2</option>
</select>

<select id="child">
	<option value="1" data-parent="1"></option>
	<option value="2" data-parent="1"></option>
	<option value="3" data-parent="2"></option>
	<option value="4" data-parent="2"></option>
</select>

$(parent).filterSelectByParent(child);

*/
jQuery.fn.filterSelectByParent = function(child) {
	return this.each(function() {
		var parent = this;
		var parentOptions = [];
		var childOptions = [];

		var childFirst = jQuery(child).find('option:first').attr('data-parent');
		var childFirstText = jQuery(child).find('option:first').text();
		var parentValue = jQuery(parent).val();
		var childValue = jQuery(child).val();
		
		//Push parent options value to parentOptions array
		jQuery(parent).find('option').each(function() {
			var self = jQuery(this);
			var selectedValue;
			if(parentValue === self.val()) {
				selectedValue = true;
			}
			else {
				selectedValue = false;
			}
			parentOptions.push({
				value: self.val(),
				text: self.text(),
				selected: selectedValue
			});
		});
		
		//Push child options value to childOptions array
		jQuery(child).find('option').each(function() {
			var self = jQuery(this);
			var selectedValue;
			if(childValue === self.val()) {
				selectedValue = true;
			}
			else {
				selectedValue = false;
			}
			childOptions.push({
				value: self.val(),
				text: self.text(),
				parent: self.attr('data-parent'),
				selected: selectedValue
			});
		});

		//Store parent & child options from the previous arrays.
		jQuery(parent).data('options', parentOptions);
		jQuery(child).data('options', childOptions);

		//Function to filter child select
		var filter = function(){
			var self = jQuery(this);
			var selectedValue = jQuery(parent).val();
			var options = jQuery(child).empty().data('options');
			
			//Loop trough each <option> in child.
			jQuery.each(options,function(i){
				var option = options[i];
				if(selectedValue === option.parent) {
					//Create option(s);
					var filteredOption = jQuery('<option>').text(option.text).val(option.value);
					
					//If option was selected, add selected tag.
					if(option.selected === true){
						filteredOption.attr('selected','selected');
					}
					//Append new option to child select.
					jQuery(child).append(filteredOption);
				}
			});
			
			if(childFirst === 'all') {
				//Create <option> that shows all citys (val="0");
				var allOption = jQuery('<option>').text(childFirstText).val('0');
				
				//Add <option> to child select.
				jQuery(child).prepend(allOption);
				
				//If current selected value = 0.
				if(childValue === '0') {
					allOption.attr('selected','selected');
				}
			}
		};
		
		//On parent <select> change, do filter();
		jQuery(parent).change(function(){
			filter();
		});
		
		//Init filter.
		filter();

	});
};