数据故事中的案例/依赖下拉过滤

问题描述

我正在使用 serverside 设置为 true 的数据表插件。

除了表数据之外，我还从服务器获取额外数据以填充客户端的下拉菜单。例如：我以 JSON 对象的形式获取“dropdowndata”，它看起来像这样：

{
    "draw": 1,"recordsTotal": "273","recordsFiltered": "39","dropdowndata": [{
        "contractProd": "Tomatoes","startDate": "2019-10-01","endDate": "2020-09-30"
    },{
        "contractProd": "Apricots","startDate": "2019-09-01","endDate": "2020-08-31"
    },{
        "contractProd": "Black Cherries","startDate": "2019-08-01","endDate": "2020-07-31"
    },{
        "contractProd": "Cheese Mixes","startDate": "2020-07-01",{
        "contractProd": "xyz","startDate": "0000-00-00","endDate": "0000-00-00"
    }]
}

在客户端收到此数据后，我会在数据表的initfunction 中使用它，并使用以下命令填充我的三个下拉选择框：

initComplete: function(settings,json) {

    var jsonone = json.dropdowndataone;
    var jsontwo = json.dropdowndatatwo;
    var jsonthree = json.dropdowndatathree;

    var one = document.getElementById('col3_filter');
    var two = document.getElementById('col5_filter');
    var three = document.getElementById('col6_filter');

    for (var i = 0; i < jsonone.length; i++) {
        one.innerHTML = one.innerHTML +
                        '<option value="' + 
                            jsonone[i]['contractProd'] + '">' + 
                            jsonone[i]['contractProd'] + 
                        '</option>';
    }
    for (var i = 0; i < jsontwo.length; i++) {
        two.innerHTML = two.innerHTML +
                        '<option value="' + 
                            jsontwo[i]['startDate'] + '">' + 
                            jsontwo[i]['startDate'] + 
                        '</option>';

    }
    for (var i = 0; i < jsonthree.length; i++) {
        three.innerHTML = three.innerHTML +
                        '<option value="' + 
                            jsonthree[i]['endDate'] + '">' + 
                            jsonthree[i]['endDate'] + 
                        '</option>';
    }
},

它按预期工作。所有三个选择框都分别填充了 contractProd 、 startDate 和 endDate 。

但问题是，当我选择产品时。 例如 Apricots ，在 startDate 下拉菜单中，它显示所有产品的开始日期。

我想要的是，如果我选择产品，它应该只显示所选产品的开始日期。

请给我一些建议，我怎样才能做到这一点

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）