从MySQL数据库填充下拉列表Python

Question

我有一个使用MySQL的Flask后端，需要从表格中拉出值以显示在下拉列表中。

我有像香蕉，苹果，橘子等

我里面的html代码单值的表，该选项显示了如果用户选择另一个下拉菜单（这是硬编码），使代码看起来像这样：

$(function() { 
     $("#inputType").change(function() { 
      var myform = "<div id=\"newForm\">" 
      +"<label for=\"inputFruit\">Fruit:</label>" 
      +"<select class=\"form-control\" id=\"inputFruit\" required>" 
      +"<option></option>" 
      +"</select>" 
      if ($("#inputType").val() == "fruits") { 
       $(myform).insertBefore("#btnSignUp"); 
      } else { 
       $("#newForm").remove(); 
      } 

在我的烧瓶应用：

@app.route('/getFruits') # gets my fruits as a list and returns 

在哪里添加代码，使我从/ getFruits获取值放入HTML中的选项？

Answer 1

您可以将上下文数据（水果列表）传递到模板的javascript代码，使用JSON将满足您的要求：

您的看法：

import json 

@app.route('/getFruits') 
def my_view(): 
    data = ['Banana', 'Apple', 'Orange', 'Pear', 'Watermalon'] # you can get list from your DB instead 
    return render_template('yourtemplate.html', data=json.dumps(data)) 

您的模板：

$(function() { 
     $("#inputType").change(function() { 
      var myform = "<div id=\"newForm\">" 
      +"<label for=\"inputFruit\">Fruit:</label>" 
      +"<select class=\"form-control\" id=\"inputFruit\" required>" 
      {% for item in data %} 
      +"<option>{{ item|safe }}</option>" 
      {% endfor %} 
      +"</select>" 
      if ($("#inputType").val() == "fruits") { 
       $(myform).insertBefore("#btnSignUp"); 
      } else { 
       $("#newForm").remove(); 
      }