我有选择下拉菜单的表单。所有这些都是从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记录，我需要有效的解决方案。
答案 0 :(得分：1)
您的代码似乎大部分都是正确的。您遇到的问题是您初始化第二个下拉列表，这就是您在feedDistricts()中所做的一切。您希望触发所选的更新事件，而不是调用.chosen()，而不是$(id).trigger("chosen:updated");。我已在下面做了相关更改，但这只是两行更改。
请参阅this SO question for more information.
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_district').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.trigger("chosen:updated");
}<!---*** 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>