jQuery dynamically update drop down

Question

I'm trying to have jQuery fill the drop downs in my form, the data is coming from JSON.

The problem I'm having is that I can't work out how to fill the 3rd drop down box with the relevant data.

For example if you select 'California' and then 'West Coast' then I would like it to display the 'product' in the 3rd drop down which would be 'Sunshine'.

JS Fiddle

I've tried to replicate my current jQuery code to access 'product.states.type' but having no luck.

products.states[i].type

Any help is much appreciated.

Answer 1

Use this code:

$('#type').on('change', function() {
    for(var i = 0; i < products.states.length; i++)
    {           
      if(products.states[i].id == $('#state').val())
      {
        for(var j = 0; j < products.states[i].type.length; j++)
        {
            if(products.states[i].type[j].id == $(this).val()){
                $('#product').html('<option></option>');
                $.each(products.states[i].type[j].product, function (index, value) {
                        $("#product").append('<option value="'+value.id+'">'+value.name+'</option>');
                });
            }

        }
      }
    }
});

http://jsfiddle.net/hJ69R/5/