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.

Code
$('#example1').cascadingDropdown({
	selectBoxes: [
		{
			selector: '.step1'
		},
		{
			selector: '.step2',
			requires: ['.step1']
		},
		{
			selector: '.step3',
			requires: ['.step1', '.step2']
		}
	]
});

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.

In this example you can also see how you the textKey and valueKey is used, and how you can override those values for each individual select box.

Code
$('#example2').cascadingDropdown({
	textKey: 'label',
	valueKey: 'value',
	selectBoxes: [
		{
			selector: '.step1',
			paramName: 'cId',
			url: '/api/country'
		},
		{
			selector: '.step2',
			requires: ['.step1'],
			paramName: 'sId',
			url: '/api/sector',
			valueKey: 'sectorId'
		},
		{
			selector: '.step3',
			requires: ['.step1', '.step2'],
			requireAll: true,
			url: '/api/offices',
			onChange: function(value){
				alert(value);
			}
		}
	]
});

Combined

This example demonstrates the plugin's capability to combine both static and dynamic dropdowns.

Code
$('#example3').cascadingDropdown({
	selectBoxes: [
		{
			selector: '.step1',
			paramName: 'cId'
		},
		{
			selector: '.step2',
			paramName: 'sId'
		},
		{
			selector: '.step3',
			requires: ['.step1', '.step2'],
			requireAll: true,
			url: '/api/offices',
			textKey: 'label',
			valueKey: 'value',
			onChange: function(value){
				alert(value);
			}
		}
	]
});

Copyright © 2013 Dzulqarnain Nasir