Question

我正在建立一个非常小的网站，根据下拉选择显示数据库信息。假设我的数据库包含2个表，第一个表包含带有ID和名称的公司。另一个与员工＆＃34;链接＆＃34;对这些公司。 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        ║ 
╚═════════════╩═════════════════╝

当选择Google＆＃39;在下拉列表中，company_ID为1的所有员工都应该出现在第二个下拉列表中（因为在这种情况下谷歌的ID为1）。

的问题：
我需要将我的Flask变量传递给.js文件以填充下拉列表目前，python文件的重要部分如下所示：

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

如果您在Flask中使用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（这是Flask的默认部分）。然后是我用来动态更新选择的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而没有明确说明它。您可以使用javascript for循环的基本替换jQuery $ .each（）调用，例如像这样的模式：

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

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

1 个答案: