I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code right - there seems to be some issue triggering the suggest.json file. Can anyone help me troubleshoot this problem?
I found the initial dropdown code on this site
The original code snippet:
<script type="text/javascript">
var s = '[{"Box1":"Africa","CODE":1,"ID":"A"},{"Box1":"Asia","CODE":2,"ID":"B"},{"Box1":"South America","Code":3,"ID":"C"}]';
var jsonData = $.parseJSON(s);
var $select = $('#mySelectID');
$(jsonData).each(function (index, o) {
var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
$select.append($option);
});
jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"});
</script>
My unsuccessful attempt at modifying the code:
<script type="text/javascript">
$.getJSON('suggest.json', function(data){
var $select = $('#mySelectID');
$.each(data, function (index, o) {
var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
$select.append($option);
});
});
jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"});
</script>
suggest.JSON content:
[{"Box1":"Africa","CODE":1,"ID":"A"},{"Box1":"Asia","CODE":2,"ID":"B"},{"Box1":"South America","Code":3,"ID":"C"}]