Ajax, Json, selectors that are depending on each other - mysql

Question

Hi
I have 3 selectors, where Products depends on type and number of products depends on Products.
Type --> Products --> Number Of Products
Im loading everything from a mySQL server and extract the data with $.getJSON. So when you load the types it automaticly fills the products with names and so on.
The problem I have now is that I want the number of products to change when the product change, but if you look at the example further down, you will see that's not the case.
Initially when you load the page the third selector wont even show any options, and when you change the "type" it wont update either.
It's only when you change the productname that this will happend.
I want this to automaticly change, how do I do this?
Thanks in advance!
This is the code I'm using,
<form>
Type:
<select name="name" id="lensType">
<option selected>Endagslins</option>
<option>Dygnet-runt-lins</option>
<option>2-veckorslins</option>
<option>Manadslins</option>
</select>
Product:
<select name="productName" id="products">
</select>
Number of products:
<select name="numberOfLenses" id="numberOfLenses">
</select>
</form>
<script type="text/javascript">
function getProducts() {
$.getJSON('getProducts.php', {lensType:$('#lensType').val()}, function(data) {
var select = $('#products');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['productName']);
});
});
}
$(document).ready(function() {
getProducts();
$('#lensType').change(function() {
getProducts();
});
});
function getNumberOfLenses() {
$.getJSON('getNumberOfLenses.php', {productName:$('#products').val()}, function(data) {
var select = $('#numberOfLenses');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['numberOfLenses']);
});
});
}
$(document).ready(function() {
getNumberOfLenses();
$('#products').change(function() {
getNumberOfLenses();
});
});
</script>

Answer 1

I figured it out myself :)
I used this code
function getProducts() {
$.getJSON('getProducts.php', {lensType:$('#lensType').val()}, function(data) {
var select = $('#products');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['productName']);
});
getNumberOfLenses();
});
}
function getNumberOfLenses() {
$.getJSON('getNumberOfLenses.php', {productName:$('#products').val()}, function(data) {
var select = $('#numberOfLenses');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['numberOfLenses']);
});
});
}
$(document).ready(function() {
getProducts();
$('#lensType').change(function() {
getProducts();
});
$('#products').change(function() {
getNumberOfLenses();
});
});