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
				// value is the current dropdown value
				// requiredValues is an object with required dropdown values
			}
		}
	]
});

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){
				// 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
	}
});

jQuery Cascading Dropdown Examples

Basic

Phone finder

Matches

Code

Dynamic

Phone finder

Matches

Code

Combined

Phone finder

Matches

Code