【发布时间】：2018-10-22 02:38:56
【问题描述】：
我有带有所选下拉菜单的表单。所有这些都是从 JSON 文件填充的。一旦用户在第一个下拉菜单中选择了值，第二个下拉菜单应该循环遍历一组值并仅填充具有相同键的值。这是一个示例，它将显示我要实现的目标
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>正如您所看到的，一旦用户选择了机构值，地区菜单应该在地区 json 中填充匹配的 aea 值。我不知道为什么，但我只看到第一个选择的机构的匹配地区。如果我选择两个或三个，它们将不会显示。即使在我将它们从代理列表中删除后，它们也会保留在地区菜单中。如果有人知道更好的处理方法，请告诉我。我的实际 JSON 有大约 4k 条记录，我需要有效的解决方案。
【问题讨论】：
标签： javascript jquery arrays json jquery-chosen