从动态依赖下拉列表中获取选定的选项 - 使用 Flask (Python)

Question

我正在尝试检索动态相关下拉列表中的选定选项，但我只使用 request.form.get 得到 None。我的示例生成下图中的下拉列表：

生成下拉列表的完整代码如下，它基于对 this question 的回答。

from flask import Flask, render_template_string, request, redirect

app = Flask(__name__)

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

    systems = {
        'PlayStation': {'Spyro': ['1', '2', '3'], 'Crash': ['4', '5', '6'], 'Ico': ['7', '8']},
        'N64': {'Mario Kart': ['Mario', 'Luigi'], 'Superman': ['12', '13', '14']}
    }
    
    if request.method == "POST":

        systemGet = request.form.get("system")
        gameGet = request.form.get("game")
        charactersGet = request.form.get("characters")
        
        print(systemGet)
        print(gameGet)
        print(charactersGet)

        return redirect('temp.html')

    return render_template_string(template, systems=systems)
    
    

template = """
<!doctype html>
<form method="POST">
    <select id="system">
        <option></option>
    </select>
    <select id="game"></select>
    <select id="characters"></select>
    <button type="submit">Play</button>
</form>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    "use strict";

    var systems = {{ systems|tojson }};

    var form = $('form');
    var system = $('select#system');
    var game = $('select#game');
    var characters = $('select#characters');

    for (var key in systems) {
        system.append($('<option/>', {'value': key, 'text': key}));
    }

    system.change(function(ev) {
        game.empty();
        game.append($('<option/>'));

        var games = systems[system.val()];

        for (var i in games) {
            game.append($('<option/>', {'value': i, 'text': i}));
        }
    });
    
    game.change(function(evV) {
        characters.empty();
        characters.append($('<option/>'));

        var games = systems[system.val()][game.val()];

        for (var i in games) {
            characters.append($('<option/>', {'value': games[i], 'text': games[i]}));
        }
    });

</script>
"""

if __name__ == '__main__':
    app.run()

编辑：包括 name 属性，正如@vremes 所建议的那样，一切正常。解变成：

from flask import Flask, render_template_string, request, redirect

app = Flask(__name__)

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

    systems = {
        'PlayStation': {'Spyro': ['1', '2', '3'], 'Crash': ['4', '5', '6'], 'Ico': ['7', '8']},
        'N64': {'Mario Kart': ['Mario', 'Luigi'], 'Superman': ['12', '13', '14']}
    }
    
    if request.method == "POST":

        systemGet = request.form.get("system")
        gameGet = request.form.get("game")
        charactersGet = request.form.get("characters")
        
        print(systemGet)
        print(gameGet)
        print(charactersGet)

        return redirect('temp.html')

    return render_template_string(template, systems=systems)
    
    

template = """
<!doctype html>
<form method="POST">
    <select id="system" name="system">
    </select>
    
    <select id="game" name="game">
    </select>
    
    <select id="characters" name="characters">
    </select>
        
    <button type="submit">Play</button>
</form>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    "use strict";

    var systems = {{ systems|tojson }};

    var form = $('form');
    var system = $('select#system');
    var game = $('select#game');
    var characters = $('select#characters');

    for (var key in systems) {
        system.append($('<option/>', {'value': key, 'text': key}));
    }

    system.change(function(ev) {
        game.empty();
        game.append($('<option/>'));

        var games = systems[system.val()];

        for (var i in games) {
            game.append($('<option/>', {'value': i, 'text': i}));
        }
    });
    
    game.change(function(evV) {
        characters.empty();
        characters.append($('<option/>'));

        var games = systems[system.val()][game.val()];

        for (var i in games) {
            characters.append($('<option/>', {'value': games[i], 'text': games[i]}));
        }
    });

</script>
"""

if __name__ == '__main__':
    app.run()

Answer 1

request.form.get 依赖于 HTML name 属性，将 name 属性添加到每个 select 下拉列表中，例如：

<!-- request.form.get('system') should work now -->
<select id="system" name="system">
    <option value="mario">Mario</option>
</select>

从动态依赖下拉列表中获取选定的选项 - 使用 Flask (Python)

Get selected option from dynamic dependent dropdown list - using Flask (Python)

javascript

python

flask

flask-sqlalchemy

flask-wtforms