Jquery-dependentSelect is a project mainly written in JavaScript, it's free.
Dependent select widget for jQuery
jquery.dependentSelect plugin transforms your difficult select element with huge amount of options into widget with cascade select boxes. It might be city or student select, for example.
You don’t need to change your HTML. Widget should work with your markup without changes. If the number of options is really huge you can load only selected.
Local data format is strict and currently can’t be changed.
$(document).ready(function() {
$('select#single-local-data').dependentSelect({
isMultiple: false,
selects: [
{ model: "Continent" },
{ model: "Country" },
{ model: "City" }
],
dataSource:
{
'Continent': {
values: [
{ value: 1, text: "Asia" },
{ value: 2, text: "Europe" }
],
relatedTo: 'Country',
relations: {
1: [1,2,3],
2: [4,5]
}
},
'Country': {
values: [
{ value: 1, text: 'Japan' },
{ value: 2, text: 'China' },
{ value: 3, text: 'Spain' },
{ value: 4, text: 'India' },
{ value: 5, text: 'Czech Republic' },
],
relatedTo: 'City',
relations: {
1: [1],
2: [2],
3: [3,4],
4: [5],
5: [6]
}
},
'City': {
values: [
{ value: 1, text: 'Tokio' },
{ value: 2, text: "Pekin" },
{ value: 3, text: "Madrid" },
{ value: 4, text: "Barcelona" },
{ value: 5, text: "New Delhi" },
{ value: 6, text: "Prague" },
]
}
}
});
All options you set in ‘selects’ array will be accessible on server.
$('select#single').dependentSelect({
isMultiple: false,
addEmpty: false,
selects: [
{ model: "School", init: "findAll", key: "relatedGroups", targetModel: "Group" },
{ model: "Group", key: "relatedStudents", targetModel: "Student" },
{ model: "Student" }
],
dataSource: 'index.php?module=get_data'
});
$('select#single-add-empty').dependentSelect({
isMultiple: false,
addEmpty: '—',
seklects: [
{ model: "School", init: "findAll", key: "relatedGroups", targetModel: "Group", emptyOptionCaption: "Select school..." },
{ model: "Group", key: "relatedStudents", targetModel: "Student", emptyOptionCaption: "Select group..." },
{ model: "Student", emptyOptionCaption: "Select student..." }
],
dataSource: 'index.php?module=get_data'
});