플라스크 (파이썬)에서 다른 선택 옵션에 따라 선택 옵션을 표시하는 방법은 무엇입니까?

Question

플라스크 (파이썬)을 사용하여 리드 양식을 작성 중입니다. 리드을 등록 할 수 있습니다. 나는 두 개의 필드가 모두 데이터베이스에서 왔으며, 첫 번째는 카테고리 (부모)이고 두 번째는 제품 (하위)입니다.

제품 필드는 카테고리에 의존해야합니다. 템플릿

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 요청을 사용할 수 있습니다. 드롭 다운에서 각 항목을 반복합니다.

를 heres 예를 들어

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 : 대답은 분명 있었다면 죄송합니다. Imple new to stackoverflow