如何在 Flask (Python) 中显示依赖于另一个选择选项的选择选项？

Question

我正在使用 Flask (Python) 创建一个潜在客户表单，用户可以在其中注册 Leads。我有两个字段都来自数据库，第一个是 Category（父），第二个是 Products（子）。

产品字段应依赖于类别。

Product Select Option

模板中的代码：

<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>

现在我想要的是，当用户点击类别时，应该只显示属于该选定类别的产品，其余的应该隐藏而不刷新页面。

谢谢。

Answer 1

首先获取父数据的id。然后查询子数据。您可以为此使用 ajax get 请求。然后迭代下拉列表中的每个项目。

举个例子

JQUERY:

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

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

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

	});	
});

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：如果答案不清楚，请见谅。我是stackoverflow的新手