使用来自MySQL数据库的数据使用Flask和jQuery填充下拉列表

Question

我正在制作一个非常小的网站，根据下拉选择显示数据库信息。 可以说我的数据库包含2个表，第一个与公司有一个ID和一个名字。另一个员工与这些公司“联系在一起”。 E.G：

╔═════════════╦════════════╗ 
║ company_ID ║ company ║ 
╠═════════════╬════════════╣ 
║ 1   ║ Google  ║ 
║ 2   ║ H&M  ║ 
║ 3   ║ IKEA  ║ 
╚═════════════╩════════════╝ 

╔═════════════╦═════════════════╗ 
║ company_ID ║ employee  ║ 
╠═════════════╬═════════════════╣ 
║ 1   ║ Google_emp1  ║ 
║ 1   ║ Google_emp2  ║ 
║ 2   ║ H&M_emp1  ║ 
║ 1   ║ Google_emp3  ║ 
║ 3   ║ IKEA_emp1  ║ 
║ 3   ║ IKEA_emp2  ║ 
║ 2   ║ H&M_emp2  ║ 
╚═════════════╩═════════════════╝ 

当一个人选择“谷歌”在下拉菜单中以1 COMPANY_ID所有的员工应该在第二个下拉显示出来（因为谷歌的ID在这种情况下为1）。

问题：
我需要将我的Flask变量传递给.js文件来填充下拉列表。
目前蟒蛇文件的重要组成部分，是这样的：

def database(): 
    c, conn = connectionDB() 

    compDB = c.execute("SELECT * FROM Companies") 
    compDB = c.fetchall() 

    empDB = c.execute("SELECT * FROM Employees") 
    empDB = c.fetchall() 

    return render_template("database.html", 
          compDB = compDB, 
          empDB = empDB, 
          HEADERTEXT_LIST = HEADERTEXT_LIST) 

我的.html文件的重要组成部分，是这样的：

<select class="chzn-select" id="company" data-placeholder="Choose company" name="company"> 
    <option value=""></option>  
<!--Here is the appending supposed to start--> 
</select> 

<select class="chzn-select" id="employee" data-placeholder="Choose employee" name="employee"> 
    <option value=""></option>  
<!--Here is the appending (depending on company) supposed to start--> 
</select> 

（我其实有几层，但原理是一样的）

我的.js文件看起来像这样（我用选为造型）：

$(function() { 
      $('.chzn-select').chosen({ 
       no_results_text: "No results for: ", 
       search_contains: true, 
       single_backstroke_delete: false, 
       disable_search: false, 
       width: "200px", 
      }); 
      $('#company').append($('<option value=""></option>')); 
      $('#company').trigger("chosen:updated"); 

     }); 

凡我数据库中的信息应该这样输入：

<option value="company_id">company</option> 

问题1：
我如何通过从的.py文件这些变量，使他们能够利用的.js文件被操纵？
我的意思是，我可以使用Flask-logic，但只能在我的.html文件中解释。
问题2：
什么是最聪明的方式来填充这些？某种形式的for-loop？我对javascript完全陌生，很抱歉可能会问这个问题。
谢谢！

Answer 1

如果您使用的是Jinja2的模板在瓶，你可以在Python中创建一个JSON对象，比如你可以使用Python的逻辑来创建一个对象，看起来像这样从查询结果：

object = [ 
    {"id": 1, "company": "Google", "employees": [ 
     {"name": "Mike"}, 
     {"name": "Jessica"}, 
    ]}, 
    {"id": 2, "company": "H&M", "employees": [...]}, 
    {"id": 3, "company": "Ikea", "employees": [...]}, 
] 

添加该对象到您的通话render_template：

return render_template("database.html", 
         compDB = compDB, 
         empDB = empDB, 
         javascript = object, 
         HEADERTEXT_LIST = HEADERTEXT_LIST) 

然后，你的HTML模板中，你需要使用2个Jinja2的内置过滤器，以使该变量作为JSON（这是瓶的默认部分）。那么这里是我用来动态更新选择的jQuery代码。

<script type="text/javascript"> 

    var myVariable = {{ javascript|tojson|safe }}; 

    var selectCompany = $('#company'); 
    var selectEmployee = $('#employee'); 

    selectCompany.empty(); 
    $.each(myVariable, function (index, value) { 
     selectCompany.append(
      $('<option>', { 
       value: index, 
       text: value.name 
      }, '</option>')) 
    }); 

    updateEmployeeSelect(); 

    selectCompany.on('change', function() { 
     updateEmployeeSelect(); 
    }); 

    function updateEmployeeSelect() { 
     var selected = selectCompany.val(); 

     selectEmployee.empty(); 
     $.each(myVariable[selected].employees, 
      function (index, value) { 
       selectEmployee.append(
        $('<option>', { 
         value: index, text: value.name 
        }, '</option>')) 
      }); 
     } 
    } 
</script> 

此外 - 更新，刚刚意识到我用上面的jQuery没有明确说明它。您可以用基本的for javascript for循环替换jQuery $ .each（）调用，例如一个这样的模式：

for (var a = 0; a < myVariable.length; a++) { 
    selectCompany.append(
     $('<option>', { 
      value: a, 
      text: myVariable[a].name 
     }, '</option>')) 
}