I thought I would share this example that I created for a demo about loading nested lists apriori with jQuery. This is a comprehensive example comprised of bits and pieces I gleaned from Stack Overflow and other readings.
I would like others to comment for improvements, and hopefully I'm not breaking any rules for the forum regarding questions. Let me know and I will make the adjustments to the post.
Click Here for the post I used for my first cut, but this Post has it all and more.
Click Here for the Demo.
Here is the main JSON File. Use this to create both files and name one list.json and the other list2.json
{
"List":[
{ "itemID":1,
"Sort":1,
"parentID":0,
"itemKey":100,
"itemText":"ListItem-#1"
},
{ "itemID":2,
"Sort":2,
"parentID":0,
"itemKey":200,
"itemText":"ListItem-#2"
},
{ "itemID":3,
"Sort":3,
"parentID":0,
"itemKey":300,
"itemText":"ListItem-#3"
},
{ "itemID":4,
"Sort":4,
"parentID":0,
"itemKey":400,
"itemText":"ListItem-#4"
},
{ "itemID":5,
"Sort":5,
"parentID":100,
"itemKey":100,
"itemText":"Child ListItem:#1-1"
},
{ "itemID":6,
"Sort":6,
"parentID":100,
"itemKey":200,
"itemText":"Child ListItem:#1-2"
},
{ "itemID":7,
"Sort":7,
"parentID":100,
"itemKey":300,
"itemText":"Child ListItem:#1-3"
},
{ "itemID":8,
"Sort":8,
"parentID":100,
"itemKey":400,
"itemText":"Child ListItem:#1-4"
},
{ "itemID":9,
"Sort":9,
"parentID":200,
"itemKey":100,
"itemText":"Child ListItem:#2-1"
},
{ "itemID":10,
"Sort":10,
"parentID":200,
"itemKey":200,
"itemText":"Child ListItem:#2-2"
},
{ "itemID":11,
"Sort":11,
"parentID":200,
"itemKey":300,
"itemText":"Child ListItem:#2-3"
},
{ "itemID":12,
"Sort":12,
"parentID":200,
"itemKey":400,
"itemText":"Child ListItem:#2-4"
},
{ "itemID":13,
"Sort":13,
"parentID":300,
"itemKey":100,
"itemText":"Child ListItem:#3-1"
},
{ "itemID":14,
"Sort":14,
"parentID":300,
"itemKey":200,
"itemText":"Child ListItem:#3-2"
},
{ "itemID":15,
"Sort":15,
"parentID":300,
"itemKey":300,
"itemText":"Child ListItem:#3-3"
},
{ "itemID":16,
"Sort":16,
"parentID":300,
"itemKey":400,
"itemText":"Child ListItem:#3-4"
},
{ "itemID":17,
"Sort":17,
"parentID":400,
"itemKey":100,
"itemText":"Child ListItem:#4-1"
},
{ "itemID":18,
"Sort":18,
"parentID":400,
"itemKey":200,
"itemText":"Child ListItem:#4-2"
},
{ "itemID":19,
"Sort":19,
"parentID":400,
"itemKey":300,
"itemText":"Child ListItem:#4-3"
},
{ "itemID":20,
"Sort":20,
"parentID":4000,
"itemKey":400,
"itemText":"Child ListItem:#4-4"
}
]
}
And here is the html file with the script block...
<html>
<head>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<select id="List1"></select>
<select id="List2"></select>
<div></div>
</body>
<!-- Begin Script Block -->
<!-- **************************************************** -->
<script type="text/JavaScript">
//get a reference to the select element
$selectParent = $('#List1');
$selectChild = $('#List2');
// Global Collection Array that can be used to assign separate JSON Files with association array
var $APPCollections = {parentList:'',childList:''};
/**
Initial load of the main data file for selection lists
******************************************************/
$.ajax({
url: 'list.json',
dataType:'JSON',
//Success callback function for asynchronous
success:function(data){
// Assign the JSON Data Package to the array element
$APPCollections['parentList'] = data;
//Clear Options Lists from Selects
$selectParent.html('');
$selectChild.html('');
//Iterate and assign options to both the Parent List and the default for the first selection
$.each(data.List, function(key, val){
if(val.parentID === 0)
{
$selectParent.append('<option id="' + val.itemKey + '">' + val.itemText + '</option>');
}
else
{
if(val.parentID === 100) /* Hard Coded for known value - not recommended */
{
$selectChild.append('<option id="' + val.itemKey + '">' + val.itemText + '</option>');
}
}
})
},
//Error Callback if the success callback fails
error:function(){
//Error Callback
$selectChild.html('<option id="-1">none available</option>');
}
});
//****************************************************************
/**
Another Ajax loader that populates $APPCollections association array with a second list
Demonstrates a simple JSON collection management concept - this element is not used in concept demo
except for variable assignment
**/
$.ajax({
url: 'list2.json',
dataType:'JSON',
success:function(data){
$APPCollections['childList'] = data;
},
error:function(){
// Error callback
$selectChild.html('<option id="-1">none available</option>');
}
});
//****************************************************************
/**
OnChange Event fires when a selection is made and the child list is wiped clean and refilled with options
from the original JSON file loaded only once
**/
$( "#List1" ).change(function () {
// Assign the Parent selected option value
var optionSelected = $('#List1 option:selected').attr('id');
// Clear out the target select object
$selectChild.html('');
// Iterate over the JSON list and look for parentID's to add for child options
$.each($APPCollections['parentList'].List, function(key, val){
if(val.parentID.toString() === optionSelected)
{
$selectChild.append('<option id="' + val.itemKey + '">' + val.itemText + '</option>');
$( "div" ).text( "parentID = " + val.parentID + " " + optionSelected );
}
});
//******************************************************************
// End Script Block
});
</script>
</html>
