How to filter dropdown based on the choice of another dropdown in JS?

Question

I want to create multiple line charts using chart.js. I have created two drop downs, both the dropdowns have to be selected to see the data on the chart. I could filter out my data using one drop down but I am unable to filter it out by choosing one value from both the drop downs.

Here is what I have tried till now:

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

I want to select "Tp" and then select example "one" and get the data. Select suppose "Hy" and then "two" and get the data displayed. I am very new to JS. Any help will be appreciated.

Questions along the lines of "how do I filter/populate a dropdown based on another dropdown selection" is one of _the **most** asked_ questions on Stackoverflow. Here are a few: https://stackoverflow.com/questions/42144695/filter-dropdown-based-on-another-dropdown-selection ... https://stackoverflow.com/questions/47083702/filter-dropdown-based-on-other-dropdown-selection ... https://stackoverflow.com/questions/47102531/filtering-dropdown-based-on-another-dropdown-selection ... https://stackoverflow.com/questions/22701279/change-dropdown-options-based-on-previous-dropdown-choice-filtered-search — Stephen P, Sep 04 '20 at 19:41

score 0 · Answer 1 · answered Sep 04 '20 at 19:00

You can edit the existing dropdown options, or you can create new options, with some basic commands. Here's an example, though I had to comment out the chart.js stuff, since that's not part of the Fiddle.

I also took the opportunity to move your arrays into variables for easy reuse, and to make your code look better. I didn't name them very well, since I didn't know what those values actually mean.

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 = new Chart(ctx, {
                        type:'line',
                        data : {
                        
                        labels: ['Boston','Worcester','SpringField','Cambridge','Lowell','New Bedford'],
                        datasets : [{
                          label:'#trips',
                          data: array1,
                          backgroundColor:'green',
                          borderWidth:4,
                          borderColor:'#777',
                          hoverBorderWidth:3,
                          hoverBorderColor:'#000'
                          
                        },{
                          label:'#rides',
                          data: array2
                        }],
                
                        },
  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(){
var select = document.getElementById("dataset2"); // I renamed the 2nd dropdown

// this loop removes previously added options, so you don't get duplicates or options not valid for the selection
for (var i = 0; i < select.options.length; i++) 
{ 
 if (select.options[i].value == "opt3" || select.options[i].value == "opt4" || select.options[i].value == "opt5")
 {
   select.remove(i); // remove at array location i
 }
}

  if(this.value=="1")
  {
  /*
    myChart.data.datasets[0].data = array1;
    myChart.data.datasets[1].data = array0;
    myChart.update();
*/
    var option = document.createElement('option');
    option.text = "testing one";
    option.value = "opt5";
    select.add(option, 0); // put this at the first location in the list
  }
  else if(this.value=="2")
  {
  /*
    myChart.data.datasets[0].data = array0;
    myChart.data.datasets[1].data = array2;
    myChart.update();
    */
    var option = document.createElement('option');
    option.text = "testing";
    option.value = "opt3";
    select.add(option, 1); // put this at the second location in the list
  }
  else if(this.value=="3")
  {
  /*
    myChart.data.datasets[0].data=array1;
    myChart.data.datasets[1].data=array2;
    myChart.update();
    */
    var option = document.createElement('option');
    option.text = "testing again";
    option.value = "opt4";
    select.add(option, 2); // put this at the third location in the list
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://github.com/chartjs/Chart.js"></script>
<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="dataset2">
        <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>

How to filter dropdown based on the choice of another dropdown in JS?

1 Answers1