Ajax, Json, sélecteurs qui dépendent les uns des autres

Question

Salut J'ai 3 sélecteurs, où les produits dépend du type et du nombre de produits dépend des produits.

Type -> Produits -> Nombre de produits

Im chargement tout à partir d'un serveur mySQL et extraire les données avec $ .getJSON. Ainsi, lorsque vous chargez les types, il remplit automatiquement les produits avec des noms et ainsi de suite. Le problème que j'ai maintenant est que je veux que le nombre de produits change quand le produit change, mais si vous regardez l'exemple plus bas, vous verrez que ce n'est pas le cas.

Initialement, lorsque vous chargez la page, le troisième sélecteur ne montre aucune option, et lorsque vous changez le "type", il ne se mettra pas à jour non plus.

Ce n'est que lorsque vous modifiez le nom du produit que cela se produira.

Je veux que cela change automatiquement, comment je fais cela?

Merci d'avance!

Voici le code que je utilise,

<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 me :)

je ce 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(); 
    }); 

});