I have the form with chosen drop down menus. All of them are populated from JSON files. Once user select the value(s) in first drop down menu, second drop down menu should loop through set of values and populate only those that have the same key. Here is example that will show what I'm tying to achieve
var appData = {
"Agencies": [{
"AEANAME": "Out of State",
"AEANUMBER": "00"
},
{
"AEANAME": "AEA 1",
"AEANUMBER": "01"
},
{
"AEANAME": "AEA 7",
"AEANUMBER": "07"
},
{
"AEANAME": "AEA 8",
"AEANUMBER": "08"
},
{
"AEANAME": "AEA 9",
"AEANUMBER": "09"
},
{
"AEANAME": "AEA 10",
"AEANUMBER": "10"
}
],
"Districts": [{
"DISTNAME": "Out of USA",
"DISTNUMBER": "0000",
"DISTAEA": "00"
},
{
"DISTNAME": "Alabama",
"DISTNUMBER": "0001",
"DISTAEA": "10"
},
{
"DISTNAME": "Arizona",
"DISTNUMBER": "0002",
"DISTAEA": "08"
},
{
"DISTNAME": "Arkansas",
"DISTNUMBER": "0003",
"DISTAEA": "00"
},
{
"DISTNAME": "California",
"DISTNUMBER": "0004",
"DISTAEA": "00"
},
{
"DISTNAME": "Colorado",
"DISTNUMBER": "0005",
"DISTAEA": "00"
},
{
"DISTNAME": "Connecticut",
"DISTNUMBER": "0006",
"DISTAEA": "09"
},
{
"DISTNAME": "District Of Columbia",
"DISTNUMBER": "0007",
"DISTAEA": "09"
},
{
"DISTNAME": "Delaware",
"DISTNUMBER": "0008",
"DISTAEA": "10"
},
{
"DISTNAME": "AGWSR Community School District",
"DISTNUMBER": "0009",
"DISTAEA": "01"
},
{
"DISTNAME": "Florida",
"DISTNUMBER": "0010",
"DISTAEA": "08"
},
{
"DISTNAME": "Georgia",
"DISTNUMBER": "0011",
"DISTAEA": "00"
},
{
"DISTNAME": "Idaho",
"DISTNUMBER": "0012",
"DISTAEA": "00"
},
{
"DISTNAME": "Illinois",
"DISTNUMBER": "0013",
"DISTAEA": "00"
},
{
"DISTNAME": "Indiana",
"DISTNUMBER": "0014",
"DISTAEA": "00"
},
{
"DISTNAME": "Kansas",
"DISTNUMBER": "0015",
"DISTAEA": "00"
},
{
"DISTNAME": "Kentucky",
"DISTNUMBER": "0016",
"DISTAEA": "00"
},
{
"DISTNAME": "Louisiana",
"DISTNUMBER": "0017",
"DISTAEA": "00"
},
{
"DISTNAME": "Adair-Casey Comm School District",
"DISTNUMBER": "0018",
"DISTAEA": "11"
},
{
"DISTNAME": "Massachusetts",
"DISTNUMBER": "0019",
"DISTAEA": "00"
},
{
"DISTNAME": "Maryland",
"DISTNUMBER": "0020",
"DISTAEA": "10"
},
{
"DISTNAME": "Maine",
"DISTNUMBER": "0021",
"DISTAEA": "08"
},
{
"DISTNAME": "Michigan",
"DISTNUMBER": "0022",
"DISTAEA": "08"
},
{
"DISTNAME": "Minnesota",
"DISTNUMBER": "0023",
"DISTAEA": "01"
},
{
"DISTNAME": "Missouri",
"DISTNUMBER": "0024",
"DISTAEA": "09"
},
{
"DISTNAME": "Mississippi",
"DISTNUMBER": "0025",
"DISTAEA": "09"
},
{
"DISTNAME": "Montana",
"DISTNUMBER": "0026",
"DISTAEA": "10"
}
]
}
$(document).ready(function() {
var agencyMenu = $('.agencies-menu');
agencyMenu.empty(); // Empty select menu before appending the options.
$.each(appData.Agencies, function(key, value) {
agencyMenu.append($("<option></option>").val(value.AEANUMBER).text('(' + value.AEANUMBER + ') ' + value.AEANAME));
});
agencyMenu.chosen({width: "100%"});
});
$('#frm_agency').on('change', feedDistricts);
function feedDistricts() {
var listAgencies = $(this).val(),
elementDist = $('#frm_district');
elementDist.attr('disabled', listAgencies.length === 0 ? true : false);
if (listAgencies.length !== 0) {
$.each(appData.Districts, function(key, value) {
if ($.inArray(value.DISTAEA, listAgencies) !== -1) { //Check if DISTAEA exist in listAgencies, if does append if not remove from drop down menu.
elementDist.append($("<option></option>").attr('data-aea', value.DISTAEA).val(value.DISTNUMBER).text('(' + value.DISTAEA + ') ' + value.DISTNAME));
} else {
elementDist.find('option[value=' + value.DISTNUMBER + ']').remove();
}
});
} else {
elementDist.find('option').empty(); // Id agencies list is null then clear the menu.
}
elementDist.chosen({width: "100%"});
}<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
<div class="form-group required">
<label class="control-label" for="agency"><span class="label label-primary">Agency:</span></label>
<select multiple class="form-control agencies-menu" name="frm_agency" id="frm_agency" required></select>
</div>
<div class="form-group">
<label class="control-label" for="district"><span class="label label-primary">District:</span></label>
<select multiple class="form-control" name="frm_district" id="frm_district" disabled></select>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>As you can see once user selects the agency value, district menu should be populated with matching aea value in districts json. I'm not sure why but I only see matching districts only for the first agency selected. If I select two or three they won't show. Also they remain in district menu even after I remove them from the agency list. If anyone knows better way of handling this please let me know. My actual JSON has around 4k records and I need efficient solution.
