title: How to do a cascade filtering using javascript
body: <p>I have a table a such</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>Env</th>
  <th>depot</th>
  <th>articles</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>100</td>
  <td>AAA</td>
  <td>Capacitor</td>
  </tr>
  <tr>
  <td>100</td>
  <td>AbA</td>
  <td>Diode</td>
  </tr>
  <tr>
  <td>100</td>
  <td>AAA</td>
  <td>cable</td>
  </tr>
  <tr>
  <td>100</td>
  <td>AbA</td>
  <td>mike</td>
  </tr>
  <tr>
  <td>100</td>
  <td>ABC</td>
  <td>modem</td>
  </tr>
  <tr>
  <td>900</td>
  <td></td>
  <td></td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>Im extracting  my data from a postgres database using php and it's working fine</p>
  <p>Now i'm wanting to do a cascade filter  to show for a specific <strong>Env</strong> the <strong>depot</strong> associated and the <strong>articles</strong> under that articles <strong>depot</strong></p>
  <p>For example , if i select in my dropdownlist <strong>Env</strong> = 100 , dropdownlist <strong>dépot</strong> would show me  AAA / AbA / ABC  then when i select <strong>AAA</strong> dropdowlist <strong>Articles</strong> will show <strong>Capacitor / cable</strong></p>
  <p>if i select in my dropdownlist <strong>Env</strong> = 900 , dropdownlist <strong>dépot</strong> would show me  nothing  so on in dropdowlist <strong>Articles</strong></p>
  <p>This is a sample of Data but my table contains more values    .</p>
  <p>Here is my code that tried but couldn't reach desired output</p>
  <pre class="lang-js prettyprint-override"><code>var options = $('#env').val();
  var selectOptions = '';
  
  for (i = 0; i &lt; options.length; i++) {
    selectOptions += '&lt;option value=&quot;' + options[i] + '&quot;&gt;' + options[i] + '&lt;/option&gt;';
  }
  
  $('#env').append(selectOptions).on('change', function() {
    var selected = $(this).find('option:selected').val();
  
    $('#depot, #articles').empty();
  
    $.each(envs, function(i, v) {;
      if (v.env == selected) {
        $('#depot').append('&lt;option value=&quot;' + v.depot + '&quot;&gt;' + v.depot + '&lt;/option&gt;');
        $('#articles').append('&lt;option value=&quot;' + v.articles + '&quot;&gt;' + v.articles + '&lt;/option&gt;');
      }
    });
  });
  </code></pre>