我想我会分享这个我创建的关于使用JQuery加载嵌套列表apriori的演示的示例。这是一个综合的例子，包括我从Stack Overflow和其他读物中收集到的零碎碎片。
我希望其他人对改进发表评论，希望我没有违反有关问题的论坛规则。让我知道，我会对帖子进行调整。
点击Here查看我用于第一次剪辑的帖子，但是这篇帖子已经包含了所有内容。
点击Here 为演示。
这是主要的JSON文件。使用它来创建两个文件并命名一个list.json和另一个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"
}
]
}
这是带有脚本块的html文件......
<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){
// Asign the JSON Data Package to the array element
$APPCollections['parentList'] = data;
//Clear Options Lists from Selects
$selectParent.html('');
$selectChild.html('');
//Iterate and asign 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 asignment
**/
$.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('');
// Iterrate through the JASON 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>