Dynamic dropdown options with JQuery
<p>I would like to dynamically change the options of a HTML dropdown menu based on which company a user selects - for example, I have this JSON data:</p>

<pre><code>series: [
{name: 'Company A', product: 'A1'},
{name: 'Company A', product: 'A2'},
{name: 'Company A', product: 'A3',},
{name: 'Company B', product: 'B1'},
{name: 'Company B', product: 'B2'}
]
</code></pre>

<p>And I have two dropdown menus:</p>

<pre><code>&lt;div class="col-md-4" &gt;
    &lt;select class="company"&gt;
          &lt;option value=''&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;/option&gt;
          &lt;option value="Company A"&gt;Company A&lt;/option&gt;
          &lt;option value="Company B"&gt;Company B&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>If the user selects Company A, then my 2nd dropdown will show products for that company:</p>

<pre><code>&lt;div class="col-md-4" &gt;
    &lt;select class="product"&gt;
          &lt;option value=''&gt;&lt;strong&gt;Products&lt;/strong&gt;&lt;/option&gt;
          &lt;option value="A1"&gt;A1&lt;/option&gt;
          &lt;option value="A2"&gt;A2&lt;/option&gt;
          &lt;option value="A3"&gt;A3&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>Likewise, if the user selects Company B, the options will be B1, B2.</p>

<p>I am stuck with a function similar to this one (I am new to web dev and an largely unfamiliar with javascript and its syntax):</p>

<pre><code>   $('.company').change(function() {
  company = this.value;
  if (company) {
    Highcharts.each(chart.series, function(ob, j) {
      if (...................) {
        ob.setVisible(true, true)
      } else {
        ob.setVisible(false, false)
      }
    });

  }
})
</code></pre>

<p>This function relates to the Highcharts API, but I don't think that that is relevant to the question; I am looking for a more general JQuery/JavaScript answer, it doesn't have to entail Highcharts...</p>