gpt4 book ai didi

jquery - 如何在不刷新页面的情况下在 flask 中创建链式选择字段?

转载 作者:行者123 更新时间:2023-11-28 19:49:03 25 4
gpt4 key购买 nike

我目前正在使用 wtf 制作地址表,其中包含国家、州、城市等。数据库都是用FK设置的。

class Country(db.Model):
__tablename__ = 'countries'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
users = db.relationship('User', backref='countries', lazy='dynamic')
class City(db.Model):
__tablename__ = 'cities'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), unique=True)
countries_id = db.Column(db.Integer, db.ForeignKey('countries.id'))

现在我正在尝试实现链式选择字段排序效果以优化用户体验。期望的效果是无需离开或刷新页面即可让 selectfield 根据先前的 selectfield 拉取数据。

例如,用户在Country中选择Australia,那么State的第二个selectfield应该只包含澳大利亚的州。

我已经对这个主题进行了一些研究,但无法提出令人满意的解决方案。这是我发现的两个可能但不令人满意的解决方案。

1.使用 jQuery-plugin 例如链式。但是,此插件需要逐行编码。如果我采用这个解决方案,至少还会有 400 多行,这不是很 pythonic。例如:

<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>

2.使用 Wtf 的“使用动态选择值选择字段”,这也是不可取的,因为它只根据前一个选择字段的默认值拉取数据一次。例如:如果国家/地区的默认选择字段是澳大利亚,则州选择字段将仅包含澳大利亚境内的州。当您将国家选择字段更改为美国时,州选择字段仍将仅包含澳大利亚境内的州。下面是 wtf 文档中列出的此方法的教程:

class UserDetails(Form):
group_id = SelectField(u'Group', coerce=int)

def edit_user(request, id):
user = User.query.get(id)
form = UserDetails(request.POST, obj=user)
form.group_id.choices = [(g.id, g.name) for g in Group.query.order_by('name')]

根据上述研究,我认为令人满意的解决方案应该介于两者之间,并且它肯定应该涉及一些 Javascript 来监视客户端事件而不向服务器发送请求。有没有人对 flask 框架有满意的解决方案?

最佳答案

如果您想要在客户端上实现一些动态的东西,就没有办法绕过编写一些 JavaScript。幸运的是,它不是您估计的 400 多行。这个例子没有使用 WTForms,但这并不重要。关键部分是将可用选项作为 JSON 发送,并动态更改可用选项。这是一个可运行的单文件 Flask 应用程序,它演示了基本思想。

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
systems = {
'PlayStation': ['Spyro', 'Crash', 'Ico'],
'N64': ['Mario', 'Superman']
}

return render_template_string(template, systems=systems)

template = """
<!doctype html>
<form>
<select id="system">
<option></option>
</select>
<select id="game"></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');

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': games[i], 'text': games[i]}));
}
});

form.submit(function(ev) {
ev.preventDefault();
alert("playing " + game.val() + " on " + system.val());
});
</script>
"""

app.run()

关于jquery - 如何在不刷新页面的情况下在 flask 中创建链式选择字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25978879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com