Comment afficher l'option de sélection en fonction d'une autre option de sélection dans Flask (Python)?

Question

Je crée un formulaire de plomb en utilisant Flask (Python) où les utilisateurs peuvent enregistrer Leads. J'ai deux champs tous les deux viennent de la base de données, le 1er est Catégorie (parent) et le 2ème est Produits (enfant).

Le champ de produits doit dépendre de la catégorie.

Product Select Option

Code

dans le modèle:

<label>Product Category</label> 
<select class="form-control" name="product_category">    
    <option value=""></option>{% for r in catagory_name %} 
    <option value="{{ r.catagory_name }}">{{ r.catagory_name }}</option>{% endfor %} 
</select> 


<label>Product</label> 
<select class="form-control" name="product">    
    <option value=""></option>{% for r in product_name %} 
    <option value="{{ r.product_name }}">{{ r.product_name }}</option>{% endfor %} 
</select> 

maintenant Ce que je veux que lorsque l'utilisateur cliquera sur catégorie, seuls les produits qui sont de cette catégorie sélectionnée doivent être affichés et le repos doivent être cachés sans rafraîchir la page.

Merci.

Answer 1

d'abord obtenir l'ID des données parentes. Puis interrogez les données enfant. vous pouvez utiliser une requête ajax get pour cela. puis itérer chaque élément sur le menu déroulant.

Voici un exemple

JQUERY: 
 

 
$(#PARENT).on('click', function(){ 
 
\t var parent= $('#PARENT').find('option:selected').text(); 
 

 
\t $.getJSON({ type: "GET", 
 
\t  url: "<?php echo base_url('url to query the product of category')?>", 
 
\t  async: false, 
 
\t  data: { name:parent }, 
 
\t  dataType: 'json', 
 
\t  success : function(data) 
 
\t  { 
 
\t   var child = $('#CHILD') 
 
\t   parent_child = jQuery.parseJSON(data); 
 
\t   child.html(''); 
 
\t   $.each(parent_child, function(key,value) { 
 
\t    if(value.isActive == 1){ 
 
\t     var child_option = $('<li><a class="gear-category" data-key="'+value.gearID+'" href="javascript:void(0)">'+value.gearName+'</a></li><li class="divider"></li>'); 
 
\t     child_option.data('index', key); 
 
\t     child.append(child_option); 
 

 
\t    } 
 
\t   }); 
 
\t  }, 
 
\t  error: function(e) 
 
\t  { 
 
\t  console.log(e); 
 
\t  } 
 

 
\t }); \t 
 
});

HTML : 
 

 

 
    <label>Product Category</label> 
 
<select ID="PARENT" class="form-control" name="product_category">    
 
    <option value=""></option>{% for r in catagory_name %} 
 
    <option value="{{ r.catagory_name }}">{{ r.catagory_name }}</option>{% endfor %} 
 
</select> 
 

 

 
<label>Product</label> 
 
<select ID="CHILD" class="form-control" name="product">    
 
    <option value=""></option>{% for r in product_name %} 
 
    <option value="{{ r.product_name }}">{{ r.product_name }}</option>{% endfor %} 
 
</select>

PS: désolé si la réponse était claire. Im nouveau à stackoverflow