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

javascript jquery python flask jinja2

278 观看

1回复

8 作者的声誉

我正在使用Flask(Python)创建销售线索表单,用户可以在其中注册Leads。我有两个字段都来自数据库,第一个是类别(父级),第二个是产品(子级)。

产品字段应取决于类别。

产品选择选项

模板中的代码:

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

现在,我希望用户单击“类别”时,仅应显示属于所选类别的产品,其余部分应隐藏而不刷新页面。

谢谢。

作者: Shubham Kumar Rohit 的来源 发布者: 2017 年 9 月 15 日

回应 1


0

79 作者的声誉

首先获取父数据的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的新手

作者: Jay 发布者: 2017 年 9 月 15 日
32x32