jquery dynamic drop down list example
HTML:
<div class="col-md-4" >
<select class="company">
<option value=''><strong>Name</strong></option>
<option value="Company A">Company A</option>
<option value="Company B">Company B</option>
</select>
</div>
<div class="col-md-4" >
<select class="product">
<option value=''><strong>Products</strong></option>
</select>
</div>
JavaScript
var 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'}
]
$(".company").change(function(){
var company = $(this).val();
var options = '<option value=""><strong>Products</strong></option>'; //create your "title" option
$(series).each(function(index, value){ //loop through your elements
if(value.name == company){ //check the company
options += '<option value="'+value.product+'">'+value.product+'</option>'; //add the option element as a string
}
});
$('.product').html(options); //replace the selection's html with the new options
});