$(document).ready(function () {
//create arrays to store option and values
var continents = [{
display: "Asia",
value: "asia"
},
{
display: "Africa",
value: "africa"
},
{
display: "Antarctica",
value: "antarctica"
},
{
display: "Australia",
value: "australia"
},
{
display: "Europe",
value: "europe"
},
{
display: "North America",
value: "north-america"
},
{
display: "South America",
value: "south-america"
}
];
var oceans = [{
display: "Pacific",
value: "pacific"
},
{
display: "Atlantic",
value: "atlantic"
},
{
display: "Indian",
value: "indian"
},
{
display: "Southern",
value: "southern"
},
{
display: "Arctic",
value: "arctic"
}
];
//If parent option is changed
$("#parent_selection").change(function () {
var parent = $(this).val(); //get option value from parent
switch (parent) { //using switch compare selected option and populate child
case 'continents':
$('#child_selection').attr('disabled', false);
list(continents);
break;
case 'oceans':
$('#child_selection').attr('disabled', false);
list(oceans);
break;
default: //default child option is blank
$("#child_selection").html('');
$('#child_selection').attr("disabled", true);
break;
}
});
//function to populate child select box
function list(array_list) {
$("#child_selection").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#child_selection").append("<option value='" + array_list[i].value + "'>" + array_list[i].display + "</option>");
});
}
});
