flask - 使用 WTForms 在 TextAreaField 中动态填充默认值的 SelectField 选项

Question

我有一个从数据库表中填充的 SelectField。我将选择加载到表单中，如下所示:

@statuses.route('/new', methods=['GET', 'POST'])
@login_required
def new_status():
    form = StatusForm()
    form.status_cd.choices = [(a.id, a.status_cd) for a in \
                               Status_Code.query.order_by('status_cd')]
    if form.validate_on_submit():
        status = Status(author=current_user)
        form.to_model(status)
        db.session.add(status)
        db.session.commit()
        flash('The status was added successfully.')
        return redirect(url_for('.index'))
    return render_template('statuses/new_status.html', form=form)  

查询中引用的模型如下:

class Status_Code(db.Model):
    __tablename__ = 'status_cd'
    id = db.Column(db.Integer, primary_key=True)
    status_cd = db.Column(db.String(16), nullable=False)
    status_detail = db.Column(db.Text)
    is_option_active = db.Boolean()
    date_created = db.Column(db.DateTime, default=db.func.now())

窗体类如下:

class StatusForm(Form):
    datetime = DateTimeField('Date / Time')
    name = StringField('Name', validators=[Required()])
    status_cd = SelectField('Status Code', coerce=int)
    status_detail = TextAreaField('Status Detail', default="Default text",\
                                validators=[Required()])
    submit = SubmitField('Submit')

问题

根据在 SelectField 中选择的选项，我希望它动态设置 status_detail TextAreaField 的默认文本。 SelectField 的值应该查询数据库并返回 status_detail，它应该是默认文本。

例如，如果我有:

id   status_cd     status_detail
1    Apple         The apples are red.
2    Banana        The bananas are yellow. 

如果用户选择“Apple”选项，则默认文本应为“The apples are red”。

如有任何帮助，我们将不胜感激!我正在构建我的第一个 Flask 应用程序，所以我是新手。

Answer 1

根据我使用 Flask 的经验，您可以通过多种方式完成此操作。没有正确的方法，一切都取决于你:

您可以加载 status_detail 数据，并将其放在您选择的选项值中的数据详细信息标签中:

<select name='status_cd' onchange="get_status(this);">
    {% for s in status %}
        <option value='{{ s.id }}' data-detail='{{ s.status_detail }}'>{{ s.status_cd }} </option>
    {% endfor %}
</select>

然后您可以使用 JavaScript 执行 onchange，然后它可以获取数据详细信息值并更新您的文本框(这是伪代码，不适合复制和粘贴):

<script>
    function onchange(o){
      var value = $(o).attr('data-detail');
      //do something with the value
   }
</script>

或

如果您不想在代码中放置数据详细信息标签，您可以在动态从数据库中提取数据的地方执行此操作，如下所示:

与 JavaScript 相同的 onchange，但随后可以调用 Ajax 调用路由方法以返回值(这是伪代码，不适用于复制和粘贴):

<script>
    function onchange(o){
      var value = $(o).value();
    $.ajax({
      url: '/my_rout',
      data: value,
      success : function(data){
        //handle your result here
      }
   })
   }
</script>

我希望这至少能让您在正确的方向上有一些不同的选择。