gpt4 book ai didi

python - 从选择字段填充表单字段的最佳方式

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

我正在为一个 flask 应用程序提供服务,并尝试使用 jquery 根据下拉菜单中的信息填充表单字段。

应用.py

from flask import Flask, render_template, request
app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def index():
cats = [{'name': 'fluffy', 'size': 'big'}, {'name': 'smelly', 'size': 'small'}]
if request.method == 'GET':
return render_template('index.html', cats=cats)
elif request.method == 'POST':
return "thanks"


if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0")

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="/" method="post">
<select>
{% for cat in cats %}
<option size={{ cat['size'] }}>{{ cat['name'] }}</option>
{% endfor %}
</select>
<input type="text" name="size" value="">
<input type="submit" value="Submit">
</form>
</body>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
</html>

我正在寻找的是一个放入 index.html 的脚本,它会监视猫的选择并使用选项中的尺寸值填充尺寸输入。

我应该注意这个输入应该保持可编辑状态,所以我可以在做出选择后覆盖尺寸输入。如果脚本仅在尚未包含值的情况下填充大小输入,则可加分。

最佳答案

python(添加了大小未知的猫)

from flask import Flask, render_template, request
app = Flask(__name__)


@app.route('/', methods=['GET', 'POST'])
def index():
cats = [{'name': 'fluffy', 'size': 'big'},
{'name': 'smelly', 'size': 'small'},
{'name': 'Mr Meow', 'size': None}]
if request.method == 'GET':
return render_template('test.html', cats=cats)
elif request.method == 'POST':
return "thanks"


if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0")

js:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="/" method="post">
<select onChange="changeSizeInput()" id="catSelect">
{% for cat in cats %}
<option size={{ cat['size'] }}>{{ cat['name'] }}</option>
{% endfor %}
</select>
<input type="text" name="size" id="catSize">
<input type="submit" value="Submit">
</form>
</body>

<script>
function changeSizeInput() {
var cat = document.getElementById('catSelect')
var size = cat.options[cat.selectedIndex].getAttribute("size");
if (size == 'None') {
size = ''
}
document.getElementById('catSize').value = size;
}
changeSizeInput()
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>
</html>

所以诀窍是在您的选择菜单中有一个事件监听器,它会在您的猫发生变化时执行。之后,它将查找所选猫的大小,然后用所选猫的大小更新输入。如果大小为 None,它会将大小设置为空字符串。加载页面时也会执行该函数,因此它也会加载选择框中的第一只猫。

有点难看,因为 python None 并没有真正赋予 javascript null,但它可以完成工作。

对于 jquery,将代码更改为:

function changeSizeInput() {
var size = $('#catSelect option:selected').attr('size')
if (size == 'None') {
size = ''
}
$('#catSize').val(size);
}
changeSizeInput()

关于python - 从选择字段填充表单字段的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50628302/

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