从选择字段填充表单字段的最佳方式答案

【问题标题】：Best Way to Populate Form Fields From Select Field从选择字段填充表单字段的最佳方式
【发布时间】：2018-11-10 16:52:28
【问题描述】：

我正在提供一个烧瓶应用程序并尝试使用 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 选择并使用选项中的尺寸值填充尺寸输入。

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

【问题讨论】：

标签： python jquery html flask

【解决方案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()

【讨论】：