使用对象数组填充并使用 jQuery 过滤级联下拉列表答案

【问题标题】：Populating using object array and filtering cascade dropdown lists using jQuery使用对象数组填充并使用 jQuery 过滤级联下拉列表
【发布时间】：2015-11-11 04:35:34
【问题描述】：

我需要使用对象数组填充三个下拉列表：

HTML：

<select id="crop"></select>
<select id="type"></select>
<select id="practice"></select>

数据（更大）：

var crops = [{
"Crop": "Annual Forage ",
    "Type": " No Type Specified ",
    "Practice": " Dec - Jan Index Interval",
    "CropCode": 0332
}, {
"Crop": "Annual Forage ",
    "Type": " No Type Specified ",
    "Practice": " Feb - Mar Index Interval",
    "CropCode": 0332
 }, {
"Crop": "Annual Forage ",
    "Type": " No Type Specified ",
    "Practice": " Jan - Feb Index Interval",
    "CropCode": 0332
 }, {
"Crop": "Apiculture ",
    "Type": " No Type Specified ",
    "Practice": " Jun - Jul Index Interval",
    "CropCode": 1191
 }, {
"Crop": "Apiculture ",
    "Type": " No Type Specified ",
    "Practice": " Jan - Feb Index Interval",
    "CropCode": 1191
 }, {
"Crop": "Apiculture ",
    "Type": " No Type Specified ",
    "Practice": " Mar - Apr Index Interval",
    "CropCode": 1191
  }, {
"Crop": "Apiculture ",
    "Type": " No Type Specified ",
    "Practice": " Sep - Oct Index Interval",
    "CropCode": 1191
 }, {
"Crop": "Apples",
    "Type": " Processing",
    "Practice": " Irrigated",
    "CropCode": 0054
 }, {
"Crop": "Apples",
    "Type": " Processing ",
    "Practice": " Non-Irrigated",
    "CropCode": 0054
 }, {
"Crop": "Apples ",
    "Type": " Processing ",
    "Practice": " Non-Irrigated(Oc)",
    "CropCode": 0054
 }, {
"Crop": "Barley ",
    "Type": " Spring Malting ",
    "Practice": " Irrigated",
    "CropCode": 0091
 }];

首先我消除了重复的Crop，然后填充第一个下拉列表：

var options = unique(crops, "Crop");
var selectOptions = '';

for (i = 0; i < options.length; i++) {

selectOptions += '<option value="' + options[i] + '">' + options[i] + '</option>';
}
$('#crop').append(selectOptions).on('change', function () {
});

//Eliminates duplicates
function unique(list, attr) {
var result = [];
$.each(list, function (i, e) {
    if ($.inArray(e[attr], result) == -1) result.push(e[attr]);
});
return result;
}

到目前为止，这工作得很好，但是我需要用通讯员Type 填充第二个下拉列表，并用其各自的Practice 填充第三个下拉列表。我被困在这里，我无法做到这一点。我需要在第一个下拉列表中进行选择时，假设：“养蜂业”，只有“养蜂业”的 Type 和 Practice 填充第二和第三个下拉列表。提前致谢。

Fiddle

【问题讨论】：

标签： javascript jquery html arrays drop-down-menu

【解决方案1】：

如果我理解正确，您可以遍历 each crop 对象并检查 crop 是否与下拉列表的值匹配，如果匹配，则相应地填充其他两个下拉列表：

$('#crop').append(selectOptions).on('change', function () {
    var selected = $(this).find('option:selected').val();
    $('#type, #practice').empty();
    $.each(crops, function(i, v) {
        if (v.Crop == selected) {
            $('#type').append('<option value="'+v.Type+'">'+v.Type+'</option>');
            $('#practice').append('<option value="'+v.Practice+'">'+v.Practice+'</option>');
        }
    });
});

Example Fiddle

【讨论】：