jquery dynamic drop down list example

1HTML:
2
3<div class="col-md-4" >
4    <select class="company">
5          <option value=''><strong>Name</strong></option>
6          <option value="Company A">Company A</option>
7          <option value="Company B">Company B</option>
8    </select>
9</div>
10<div class="col-md-4" >
11    <select class="product">
12          <option value=''><strong>Products</strong></option>
13    </select>
14</div>
15JavaScript
16
17var series = [
18{name: 'Company A', product: 'A1'},
19{name: 'Company A', product: 'A2'},
20{name: 'Company A', product: 'A3'},
21{name: 'Company B', product: 'B1'},
22{name: 'Company B', product: 'B2'}
23]
24
25$(".company").change(function(){
26    var company = $(this).val();
27    var options =  '<option value=""><strong>Products</strong></option>'; //create your "title" option
28    $(series).each(function(index, value){ //loop through your elements
29        if(value.name == company){ //check the company
30            options += '<option value="'+value.product+'">'+value.product+'</option>'; //add the option element as a string
31        }
32    });
33
34    $('.product').html(options); //replace the selection's html with the new options
35});