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

Populating using object array and filtering cascade dropdown lists using jQuery

本文关键字：过滤 下拉列表 jQuery 级联 对象 数组 填充      更新时间：2023-09-26

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

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

如果我理解正确，您可以迭代eachcrop对象，并检查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>');
        }
    });
});

示例Fiddle

相关文章：