Question

我遇到了一些问题。这里是我创建的概述：一个简单的表单，包含2个选择字段，1个文件上载字段和一个提交按钮。第一个选择将从sql数据库中选择它（我已完成）然后根据用户从SelectField1中选择的内容，SelectField2将填充来自SQL数据库的结果。我希望在1号选择时发生这种情况。换句话说，让selectfield2动态更新/填充自己而不刷新页面。

工作流程将如下所示：

从SelectField1中选择客户端名称（根据选择从sql中提取客户端计划列表。使用它们填充SelectField2而不刷新页面。）
从SelectField2
使用
FileField
提交按钮

有人能指出我正确的方向吗？我在周末在家工作，所以我没有连接到数据库。我创建了3个要测试的列表。

我尝试过这样的事情：

if form.sf_baclient.data == 'py':
    form.sf_clientplan.choices = list2
else:
    form.sf_clientplan.choices = list3

但是没有进行实时更新。这是html和视图的代码：

HTML

    <form action="{{ url_for('index') }}" method=post>
        {{ form.hidden_tag() }}
        <dl>
            {{ form.sf_baclient.label }}<br>
            {{ form.sf_baclient }}<br>

            {{ form.sf_clientplan.label }}<br>
            {{ form.sf_clientplan }}<br>

            {{ form.ff_pdf_upload.label }}<br>
            {{ form.ff_pdf_upload }}<br>

        </dl>
        {{ form.sb_submit }}
    </form>

查看

@app.route('/', methods=['GET', 'POST'])
def index():

form = MyForm(request.form)

list1 = [('cpp', 'C++'), ('py', 'Python'), ('text', 'Plain Text')]
list2 = [('1', 'One'), ('2', 'Two'), ('3', 'Three')]
list3 = [('blue', 'Blue'), ('red', 'Red'), ('green', 'Green')]

form.sf_baclient.choices = list1
form.sf_baclient.choices.insert(0, ('', ''))

form.sf_clientplan.choices = list3
form.sf_clientplan.choices.insert(0, ('', ''))

if request.method == 'GET':
    return render_template('home.html', form=form)

elif request.method == 'POST':
    if form.sb_submit.data == True:
        message = form.sf_baclient.data
        # flash(message)

    return render_template('home.html', form=form, success=True)

Answer 1

大部分必须在客户端编写脚本。这就是我最终做的事情。如果不够清楚，请告诉我。

在视图文件中创建路径和网址以处理处理。我通常用下划线和单词parse开始这些。见下文。

@app.route('/_parse_data', methods=['GET'])
def parse_data():
    if request.method == "GET":

        # only need the id we grabbed in my case. 
        id = request.args.get('b', 0)
        new_list = _call_to_db(id)

        # When returning data it has to be jsonify'ed and a list of tuples (id, value) to populate select fields.
        # Example: [('1', 'One'), ('2', 'Two'), ('3', 'Three')]

    return jsonify(new_list)

您需要使用javascript / jquery确定选择。所以在我的javascript中我写了这个。

    $('#sf_baclient').on('change', function() {

            $("#sf_clientplan").empty();

            baclient_name = $("#sf_baclient option:selected").text();
            baclient_id = $("#sf_baclient option:selected").val();

            # Sending variables containing selection info to parse_data function in python.
            # jQuery's builtin ajax functions make things super easy 

            # Calling that parse url and sending it arguments
            $.getJSON($SCRIPT_ROOT + '/_parse_data', {
                a: baclient_name,
                b: baclient_id

            # Function to get data returned from parse_data and populate the second select field. 
            }, function(data) {
                # Using jQuery to populate new entries we got from flask.
                var options = $("#sf_clientplan");
                $.each(data, function() {
                    options.append($("<option />").val(this).text(this));
                });

            });

Answer 2

if 'py' in form.sf_baclient.data:
    form.sf_clientplan.choices = list2
else:
    form.sf_clientplan.choices = list3

逻辑上它应该与你拥有的相似。我知道你的目标是让它实时更新，尝试将它包装在while循环中，当form.sf_baclient.data包含数据时激活它。

根据另一个选择字段的数据动态更新选择字段？

2 个答案: