DreadyCrig
10/9/2014 - 3:02 PM

jQuery Chained Selects Plugin

jQuery Chained Selects Plugin

/**
 * Handles chained select boxs
 * @author  Shawn Crigger
 */
;(function ( $, window, document, undefined ) {

		// Create the defaults once
		var chainSelects = "chainSelects",
				self     = null,
				defaults = {
					id     : 0,
					action : "get_city",
					url    : "/do-ajax.php",
					disabled_text: "<option>wait...</option>",
					target : "select#city"
		};

		// The actual plugin constructor
		function Plugin ( element, options ) {
				self = this;
				self.element = element;
				// jQuery has an extend method which merges the contents of two or
				// more objects, storing the result in the first object. The first object
				// is generally empty as we don't want to alter the default options for
				// future instances of the plugin
				self.settings = $.extend( {}, defaults, options );
				self._defaults = defaults;
				self._name = chainSelects;
				self._target = self.settings.target;
				self.init( self.settings );
		}

		// Avoid Plugin.prototype conflicts
		$.extend(Plugin.prototype, {
				init: function ( settings ) {

					// select boxes for states -> cities
					$(self.element).change(function()
					{
						$(self._target).attr("disabled","disabled").html( settings.disabled_text );
						self.settings.id = $(this).find(":selected").val();
						$.ajax(
						{
							type: "POST",
							url: "/do-ajax.php",
							data: {
								id : self.settings.id,
								action : self.settings.action
							},
							cache: false,
							success: function(html)
							{
								$(self._target).removeAttr("disabled").html(html);
							}
						});
					});

				}

		});

		// A really lightweight plugin wrapper around the constructor,
		// preventing against multiple instantiations
		$.fn[ chainSelects ] = function ( options ) {
				this.each(function() {
						if ( !$.data( this, "plugin_" + chainSelects ) ) {
								$.data( this, "plugin_" + chainSelects, new Plugin( this, options ) );
						}
				});

				// chain jQuery functions
				return this;
		};

})( jQuery, window, document );