使用Jinja从python列表动态生成表单输入和标签。
使用Jinja从python列表动态生成表单输入和标签。
提问于 2018-03-22 13:27:57
如何使用Jinja2从列表中动态生成表单输入和标签？例如，假设我有列表：
A = ["name", "city", "state","phone"]
B = ["album", "artist", "genre"]
C = ["title","author","category", "subcategory"]还有标记为A、B和C的按钮。我希望根据单击哪个按钮动态生成表单。因此，如果单击了B，我希望使用B中的项动态生成：
<form>
<div class="form-group row">
<label for="album" class="col-2 col-form-label">album</label>
<div class="col-10">
<input class="form-control" type="text" id="album">
</div>
</div>
<div class="form-group row">
<label for="artist" class="col-2 col-form-label">artist</label>
<div class="col-10">
<input class="form-control" type="text" id="artist">
</div>
</div>
<div class="form-group row">
<label for="genre" class="col-2 col-form-label">genre</label>
<div class="col-10">
<input class="form-control" type="text" id="genre">
</div>
</div>
</form>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-22 14:09:05
如果我理解你的情况，我认为这是一个可行的解决方案。
Python示例文件：
from flask import Flask, render_template
app = Flask(__name__)
B = ["Ten","Pearl Jam","Grunge"]
@app.route('/')
def main():
return render_template('stuff.html', my_list=B)
if __name__ == '__main__':
app.run(debug=True, port=5000)模板示例文件：
<!doctype html>
<title>Test</title>
<div class=page>
<h1>Data</h1>
<form>
<div class="form-group row">
<label for="album" class="col-2 col-form-label">{{my_list[0]}}</label>
<div class="col-10">
<input class="form-control" type="text" id="album">
</div>
</div>
<div class="form-group row">
<label for="artist" class="col-2 col-form-label">{{my_list[1]}}</label>
<div class="col-10">
<input class="form-control" type="text" id="artist">
</div>
</div>
<div class="form-group row">
<label for="genre" class="col-2 col-form-label">{{my_list[2]}}</label>
<div class="col-10">
<input class="form-control" type="text" id="genre">
</div>
</div>
</form>
</div>for循环的模板示例：
<!doctype html>
<title>Test</title>
<div class=page>
<h1>Data</h1>
{% for item in my_list %}
<li>{{item}}</li>
{% endfor %}
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49429940
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号