燒瓶動態相關下拉列表

我開始閱讀一些燒瓶應用程序編程，我一直試圖讓下拉菜單工作，但到目前爲止，我沒有運氣。我想要做的是，當用戶從第一個下拉列表中選擇食物類型時，它應該從數據庫中獲取相應的列表並填充第二組下拉列表。我不知道如何在做出選擇後發送快速請求。我真的不明白這裏應該做什麼。燒瓶動態相關下拉列表

<body> 
 
    <div> 
 
    <form action="{{ url_for('test') }}" method="POST"> 
 
     <div> 
 
     <label>Food:</label> 
 
     <select id="food" name="food" width="600px"> 
 
     <option SELECTED value='0'>Choose your fav food</option> 
 
     {% for x in food %} 
 
      <option value= '{{ x }}'>{{x}}</option> 
 
     {% endfor %} 
 
     </select> 
 
     <!-- After a selection is made, i want it to go back to the database and fectch the results for the below drop box based on above selection --> 
 
     </div> 
 
     <div> 
 
     <label>Choose Kind of Food:</label> 
 
     <select id="foodChoice" name="foodChoice" width="600px"> 
 
     <option selected value='0'>Choose a kind</option> 
 
     {% for x in foodChoice %} 
 
      <option value= '{{ x }}'>{{x}}</option> 
 
     {% endfor %} 
 
     </select> 
 
     </div> 
 
     <div> 
 
     <input type="submit"> 
 
     </div> 
 
    </form> 
 
    </div>

app.html

@app.route('/', method = ['GET', 'POST']) 
def index(): 
    foodList = [ i.type for i in db.session.query(FoodType)] 
    return render_template('main.html', food=foodList) 

@app.route(/foodkind', method = ['GET', 'POST']) 
def foodkind(): 
     selection = request.form['foodChoice'] 
     foodKind = [ i.kind for i in db.session.query(FoodType).filter(FoodKind == selection)] 
     return render_template('main.html', foodChoice = foodKind)

我已經看了很多問題，我還沒有找到任何簡單的，這將有助於我。如果有人能爲我演示一個代碼，這將是一件好事，所以我可以從中學習。

來源

2017-06-20 ben

您需要在這裏使用Ajax根據您選擇的食物檢索食物列表。因此，在你的模板中，您將需要包括這樣的事情：

<html> 
    <head> 

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"> 
    </script> 

    <script> 
     $(document).ready(function() { 
     $('#foodkind').change(function() { 

      var foodkind = $('#foodkind').val(); 

      // Make Ajax Request and expect JSON-encoded data 
      $.getJSON(
      '/get_food' + '/' + foodkind, 
      function(data) { 

       // Remove old options 
       $('#food').find('option').remove();         

       // Add new items 
       $.each(data, function(key, val) { 
       var option_item = '<option value="' + val + '">' + val + '</option>' 
       $('#food').append(option_item); 
       }); 
      } 
     ); 
     }); 
     }); 
    </script> 
    </head> 

    <body> 
    <form> 
     {{ form.foodkind() }} 
     {{ form.food() }} 
    </form> 
    </body> 
</html>

此代碼將使JSON編碼數據的速記Ajax請求。這些數據包含食物選擇框的值列表。

對於這個工作，你需要一個端點/get_food/<foodkind>添加到您的瓶觀點：

food = { 
    'fruit': ['apple', 'banana', 'cherry'], 
    'vegetables': ['onion', 'cucumber'],             
    'meat': ['sausage', 'beef'], 
} 


@app.route('/get_food/<foodkind>') 
def get_food(foodkind): 
    if foodkind not in food:                 
     return jsonify([]) 
    else:                      
     return jsonify(food[foodkind])

來源

2017-06-20 13:10:15 MrLeeh

燒瓶動態相關下拉列表

回答

相關問題