Question

我正在服务烧瓶应用并试图使用jquery根据下拉菜单中的信息填充表单字段。

app.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的脚本，它会监视cat select并使用选项中的size值填充大小输入。

我应该注意，此输入应保持可编辑状态，因此我可以在选择后覆盖大小输入。如果脚本仅填充大小输入（如果它尚未包含值），则为奖励点。

Answer 1

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()

从选择字段

1 个答案: