jQuery Cascading Dropdown Plugin Examples

Basic

This is a basic dropdown setup where the second dropdown is dependent on the first dropdown having a value, and the third dropdown is dependent on either the first or second one having a value.

This example also shows how you can set the selected dropdown item when you initialise the plugin. This can be done either in code, or by including the HTML selected attribute on the targeted dropdown item.

Phone finder

Matches

No matches

Code

$('#example1').cascadingDropdown({
	selectBoxes: [
		{
			selector: '.step1',
			selected: '4.3'
		},
		{
			selector: '.step2',
			requires: ['.step1']
		},
		{
			selector: '.step3',
			requires: ['.step1', '.step2'],
			onChange: function(event, value, requiredValues) {
				// do stuff

				// event is the change event object for the current dropdown
				// value is the current dropdown value
				// requiredValues is an object with required dropdown values
				// requirementsMet is a boolean value to indicate if all requirements (including current dropdown having a value) have been met
			}
		}
	]
});

Dynamic

This example shows how you can create a completely dynamic group of dropdowns. Dropdowns with dependencies will react based on the rules given, and fetch its own list from the server via Ajax.

You can provide an array of strings or objects, or a function as the dropdown data source.

This example also demonstrates how you can set the selected item for a dropdown in the source option. For example, you can have it select an item when it is the only item available. The plugin will select that item and trigger the change event.

Phone finder

Matches

No matches

Code

$('#example2').cascadingDropdown({
	selectBoxes: [
		{
			selector: '.step1',
			source: [
				{ label: '4.0"', value: 4 },
				{ label: '4.3"', value: 4.3 },
				{ label: '4.7"', value: 4.7 },
				{ label: '5.0"', value: 5 }
			]
		},
		{
			selector: '.step2',
			requires: ['.step1'],
			source: function(request, response) {
				$.getJSON('/api/resolutions', request, function(data) {
					var selectOnlyOption = data.length <= 1;
					response($.map(data, function(item, index) {
						return {
							label: item + 'p',
							value: item,
							selected: selectOnlyOption // Select if only option
						};
					}));
				});
			}
		},
		{
			selector: '.step3',
			requires: ['.step1', '.step2'],
			requireAll: true,
			source: function(request, response) {
				$.getJSON('/api/storages', request, function(data) {
					response($.map(data, function(item, index) {
						return {
							label: item + ' GB',
							value: item,
							selected: index == 0 // Select first available option
						};
					}));
				});
			},
			onChange: function(event, value, requiredValues, requirementsMet){
				// do stuff
			}
		}
	]
});

Combined

This example demonstrates the plugin's capability to combine both static and dynamic dropdowns. It also demonstrates how you can set the default selected dropdown item in a dynamic dropdown scenario.

Phone finder

Matches

No matches

Code

$('#example3').cascadingDropdown({
	selectBoxes: [
		{
			selector: '.step1'
		},
		{
			selector: '.step2'
		},
		{
			selector: '.step3',
			requires: ['.step1', '.step2'],
			requireAll: true,
			source: function(request, response) {
				$.getJSON('/api/storages', request, function(data) {
					response($.map(data, function(item, index) {
						return {
							label: item + ' GB',
							value: item,
							selected: index == 0 // set to true to mark it as the selected item
						};
					}));
				});
			}
		}
	],
	onChange: function(event, dropdownData) {
		// do stuff
		// dropdownData is an object with values from all the dropdowns in this group
	},
	onReady: function(event, dropdownData) {
		// do stuff
	}
});

Option Group

This example demonstrates the plugin's capability to combine both standard and grouped (option group) dropdowns.

Phone finder

Matches

No matches

Code

$('#example5').cascadingDropdown({
	selectBoxes: [
	{
		selector: '.step1'
	},
	{
		selector: '.step2',
		source: function(request, response) {
			$.getJSON('/api/resolutionsGrouped', request, function(data) {
				var newData = {};
				$.each(data, function(key, value) {
					newData[key] = $.map(value, function(item, index) {
						return {
							label: item + 'p',
							value: item
						};
					});
				});

				response(newData);
			});
		}
	},
	{
		selector: '.step3',
		requires: ['.step1', '.step2'],
		requireAll: true,
		source: function(request, response) {
			$.getJSON('/api/storages', request, function(data) {
				response($.map(data, function(item, index) {
					return {
						label: item + ' GB',
						value: item,
						selected: index == 0 // set to true to mark it as the selected item
					};
				}));
			});
		}
	}
	],
	onChange: function(event, dropdownData) {
		// do stuff
		// dropdownData is an object with values from all the dropdowns in this group
	},
	onReady: function(event, dropdownData) {
		// do stuff
	}
});

Multiple select

You can enable multiple select by including the multiple attribute. The value for the dropdown will then be an array of strings instead of a string. However, you will need to ensure that your backend service supports this type of data.

Phone finder

Matches

No matches

jQuery Cascading Dropdown Examples

Basic

Phone finder

Matches

Code

Dynamic

Phone finder

Matches

Code

Combined

Phone finder

Matches

Code

Option Group

Phone finder

Matches

Code

Multiple select

Phone finder

Matches