Populating using object array and filtering cascade dropdown lists using jQuery

Question

I have three dropdowns that I need to populate using an object array:

HTML:

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

Data (it is much larger):

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
 }];

First I eliminate the Crop that is a duplicate, and then populate the first dropdown:

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;
}

So far this works just fine, but then I need to populate the second drop down with the correspondent Type and the third with its respective Practice. I'm stuck here, and I can't get it to do it. I need that when a selection is made in the firt drop down, let's say: "Apiculture", only the Type and Practice for "Apiculture" populate the second and third dropdowns. Thanks in advance.

Fiddle

Michael Doye · Accepted Answer · 2015-11-10 20:35:34Z

2

If I understand you correctly, you can iterate over each crop object and check if the crop matches the value of the drop down, and if it does, populate the other two dropdowns accordingly:

$('#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

edited Nov 10, 2015 at 20:35

answered Nov 10, 2015 at 20:28

Michael Doye

8,2115 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Populating using object array and filtering cascade dropdown lists using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related