title: Ajax, Json, selectors that are depending on each other
body: <p>Hi
  I have 3 selectors, where Products depends on type and number of products depends on Products.</p>
  
  <p>Type --> Products --> Number Of Products</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Initially when you load the page the third selector wont even show any options, and when you change the "type" it wont update either.</p>
  
  <p>It's only when you change the productname that this will happend.</p>
  
  <p>I want this to automaticly change, how do I do this?</p>
  
  <p>Thanks in advance!</p>
  
  <p>This is the code I'm using,</p>
  
  <pre><code>&lt;form&gt;
      Type:
      &lt;select name="name" id="lensType"&gt;
          &lt;option selected&gt;Endagslins&lt;/option&gt;
          &lt;option&gt;Dygnet-runt-lins&lt;/option&gt;
          &lt;option&gt;2-veckorslins&lt;/option&gt;
          &lt;option&gt;Manadslins&lt;/option&gt;
      &lt;/select&gt;
      Product:
      &lt;select name="productName" id="products"&gt;
      &lt;/select&gt;
      Number of products:
      &lt;select name="numberOfLenses" id="numberOfLenses"&gt;
      &lt;/select&gt;
  
  &lt;/form&gt;
  
  
  &lt;script type="text/javascript"&gt;
      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();
          });
  
      });
  
  &lt;/script&gt;
  </code></pre>