Javascript 如何根据JS中另一个下拉列表的选择过滤下拉列表？

我想使用chart.js创建多个折线图。我创建了两个下拉列表，必须选择两个下拉列表才能查看图表上的数据。我可以使用一个下拉列表筛选数据，但无法通过从两个下拉列表中选择一个值来筛选数据

以下是我迄今为止所做的尝试：

    <div class="container-fluid">
      <div class="row">
        <div class="col-4">
          <div class="form-group mt-3 mb-3">
          <label for="dataset">Select Factor</label>
      <select class="form-control" id="dataset">
         <option id="opt1" value="1">one</option>
        <option id="opt2" value="2">two</option>
        <option id="opt3" value="3">three</option>
      </select>
        </div>
        </div>
        <div class="col-4"></div>
        <div class="col-4">
          <div class="form-group mt-3 mb-3">
            <label for="dataset">Select Options</label>
      <select class="form-control" id="dataset">
        <option id="opt1" value="4">Tp</option>
        <option id="opt2" value="5">Hy</option>
      </select>
    </div>
        </div>
        <div class="col-4"></div>
      </div>
      <div class="row">
        <div class="col"></div>
        <div class="col-12">
          <canvas id="myChart"></canvas>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
                        type:'line',
                        data : {
                        
                        labels: ['Boston','Worcester','SpringField','Cambridge','Lowell','New Bedford'],
                        datasets : [{
                          label:'#trips',
                          data:[
                            3,
                            6,
                            10,
                            12,
                            19,
                            25
                          ],
                          backgroundColor:'green',
                          borderWidth:4,
                          borderColor:'#777',
                          hoverBorderWidth:3,
                          hoverBorderColor:'#000'
                          
                        },{
                          label:'#rides',
                          data:[
                            14,
                            28,
                            80,
                            20,
                            60,
                            45
                          ]
                        }],
                
                        },
  options:{
    title:{
      display:true,
      text:'Line chart',
      fontSize:15
    },
    legend:{
      position:'bottom',
      labels:{
        fontColor:'red'
      }
    
  },
    layout:{
      padding:{
        left:50,
        right:0,
        top:0,
        bottom:0
      }
    },
    tooltips:{
      enabled:true
    }
  }
                        });
$('#dataset').on('change', function(){
  if(this.value=="1"){
    myChart.data.datasets[0].data = [3,
                            6,
                            10,
                            12,
                            19,
                            25];
    myChart.data.datasets[1].data = [0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0];
    myChart.update();
  }else if(this.value=="2"){
    myChart.data.datasets[0].data = [0,
                                    0,
                                    0,
                                    0,
                                    0,
                                    0];
    myChart.data.datasets[1].data = [14,
                            28,
                            80,
                            20,
                            60,
                            45];
    myChart.update();
  }else if(this.value=="3"){
    myChart.data.datasets[0].data=[3,
                            6,
                            10,
                            12,
                            19,
                            25];
    myChart.data.datasets[1].data=[14,
                            28,
                            80,
                            20,
                            60,
                            45];
    myChart.update();
  }
});

选择因子
一
二
三
选择选项
总磷
Hy
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
类型：'行'，
数据：{
标签：[“波士顿”、“伍斯特”、“斯普林菲尔德”、“剑桥”、“洛厄尔”、“新贝德福德”]，
数据集：[{
标签：“#行程”，
数据：[
3.
6.
10,
12,
19,
25
],
背景颜色：'绿色'，
边框宽度：4，
边框颜色：'#777'，
悬停边界宽度：3，
悬停边框颜色：“#000”
},{
标签：“#骑乘”，
数据：[
14,
28,
80,
20,
60,
45
]
}],
},
选项：{
标题：{
显示：对，
文字：'折线图'，
尺寸：15
},
图例：{
位置：'底部'，
标签：{
fontColor:“红色”
}
},
布局：{
填充：{
左:50,，
右:0,，
排名：0，
底部：0
}
},
工具提示：{
已启用：true
}
}
});
$（'#dataset'）。在（'change'，function（）上{
如果（此.value==“1”）{
myChart.data.datasets[0]。数据=[3，
6.
10,
12,
19,
25];
myChart.data.datasets[1]。数据=[0，
0,
0,
0,
0,
0];
myChart.update（）；
}else if（this.value==“2”）{
myChart.data.datasets[0]。数据=[0，
0,
0,
0,
0,
0];
myChart.data.datasets[1]。数据=[14，
28,
80,
20,
60,
45];
myChart.update（）；
}else if（this.value==“3”）{
myChart.data.datasets[0]。数据=[3，
6.
10,
12,
19,
25];
myChart.data.datasets[1]。数据=[14，
28,
80,
20,
60,
45];
myChart.update（）；
}
});

我想选择“Tp”，然后选择示例“one”并获取数据。选择假设“Hy”，然后选择“two”，并显示数据。

---

我对JS很陌生。任何帮助都将不胜感激。

您可以编辑现有的下拉选项，也可以使用一些基本命令创建新选项。这里有一个例子，虽然我不得不注释掉

chart.js

的东西，因为这不是小提琴的一部分

我还借此机会将数组移动到变量中，以便于重用，并使代码看起来更好。我没有很好地命名它们，因为我不知道这些值实际上意味着什么

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var array0=[0,0,0,0,0,0]；
var array1=[3,6,10,12,19,25]；
var array2=[14,28,80,20,60,45]；
/*
var myChart=新图表（ctx{
类型：'行'，
数据：{
标签：[“波士顿”、“伍斯特”、“斯普林菲尔德”、“剑桥”、“洛厄尔”、“新贝德福德”]，
数据集：[{
标签：“#行程”，
数据：array1，
背景颜色：'绿色'，
边框宽度：4，
边框颜色：'#777'，
悬停边界宽度：3，
悬停边框颜色：“#000”
},{
标签：“#骑乘”，
数据：array2
}],
},
选项：{
标题：{
显示：对，
文字：'折线图'，
尺寸：15
},
图例：{
位置：'底部'，
标签：{
fontColor:“红色”
}
},
布局：{
填充：{
左:50,，
右:0,，
排名：0，
底部：0
}
},
工具提示：{
已启用：true
}
}
});
*/
$（'#dataset'）。在（'change'，function（）上{
var select=document.getElementById（“dataset2”）；//我重命名了第二个下拉列表
//此循环将删除以前添加的选项，因此不会得到重复项或对选择无效的选项
法罗群岛