python - 根据另一个 SelectField 的数据动态更新 SelectField？

Question

我对此有点疑问。以下是我创建的内容的概述:一个简单的表单，其中包含 2 个选择字段、1 个文件上传字段和一个提交按钮。第一个选择将从 sql 数据库中提取它的选择(我已经完成了)然后根据用户从 SelectField1 中选择的内容，SelectField2 将填充它从 SQL 数据库中得到的结果。我希望在选择 1 时发生这种情况。换句话说，让 selectfield2 动态更新/填充自身而不刷新页面。

工作流程将是这样的:

• 从 SelectField1 中选择客户名称(根据选择从 sql 中提取客户计划列表。在不刷新页面的情况下用它们填充 SelectField2。)
• 从 SelectField2 中选择一个客户计划
• 使用
上传相关pdf
• 文件字段
• 提交按钮

谁能指出我正确的方向？我周末在家做这件事，所以我没有连接到数据库。我创建了 3 个列表来测试。

我试过做类似的事情:

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

但这并没有进行实时更新。这是 html 和 View 的代码:

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

其中大部分必须在客户端编写脚本。这就是我最终要做的。让我知道是否不够清楚。

在您的 View 文件中创建一个路由和 url 来处理处理。我通常以下划线和解析一词开头。见下文。

@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));
                });

            });