使用underscore.js模板对其父级唯一的动态选择选项

Question

这是我的代码小提琴：

https://jsfiddle.net/ost9area/

这就是我要做的事情：

我为数据创建了三个数组：

filterFields = {
    "group.name": "Group name",
    "group.effective_status": "Group status",
    "subgroup.name": "Subgroup name",
    "subgroup.effective_status": "Subgroup status",
    "person.name": "Person name",
    "person.effective_status": "Person status",
}

filterOperators = {
    "name": {
        "CONTAIN": "Contains",
        "NOT_CONTAIN": "Doesn't contain"
    },
    "effective_status": {
        "status.IN": "is",
        "status.NOT_IN": "is not"
    }
}
filterStatuses = {
    "group": {
        "ACTIVE": "Active",
        "PAUSED": "Paused"
    },
    "subgroup": {
        "ACTIVE": "Active",
        "PAUSED": "Paused",
        "GROUP_PAUSED": "Group Paused"
    },
    "person": {
        "ACTIVE": "Active",
        "PAUSED": "Paused",
        "GROUP_PAUSED": "Grpup Paused",
        "SUBGROUP_PAUSED": "Subgroup Paused"
    }
}

概念是，当在第一个字段中选择name时，会在第二个字段中选择contains，而在第三个字段中会出现文本框。但是，在第一个字段中选择effective_status时，在第二个字段中选择status，第三个字段中也选择id。我做到了，我也设法在那里制定了多种条件。但是，只有第一个盒子工作。我可以通过动态地为每个字段设置单独的Save Changes来使所有框都有效。

我不确定这是不是正确的方法。我已经拥有22行javascript和3个下划线模板。我正在寻找以正确的方式做到这一点的指南。另外，请记住，当点击window.$ = window.jQuery = require('jquery'); $(document).ready(function() { $('select').material_select(); }); function populateSelect() { $('.select-person').empty(); people.forEach(function(person, index) { var option = $('<option></option>'); option.val(index); option.text(person.name); $('.select-person').append(option); }) $('.select-person').material_select(); }时，我打算将数据发送到根页面（在弹出之前）。

我们如何正确处理这样的情况？当可以添加无限数量的字段时，一个字段由另一个字段操纵。