WTForms- SelectField 选择（子类别）使用表格数据自动填充 StringField（主类别）答案

【问题标题】：WTForms- SelectField choice (sub-category) autofills StringField (main category) using table dataWTForms- SelectField 选择（子类别）使用表格数据自动填充 StringField（主类别）
【发布时间】：2017-07-12 14:44:46
【问题描述】：

我有一个包含以下数据的表格：

 programme_sub_category | main_programme_category 
------------------------+--------------------
 EVENT                  | ROT
 LIVE MUSIC             | LIVE MUSIC
 CONCERT                | LIVE MUSIC
 OPERA                  | LIVE MUSIC
 REHEARSAL              | UNPUBLISHED
 DRAMA                  | PRE-REC
 IDENT                  | UNPUBLISHED
 UNPUBLISHED            | UNPUBLISHED

第 1 列中的数据用于填充下拉菜单，用户可以在其中选择 program_sub_category。在同一页面上，我还有一个用于 main_programme_category 的 StringField。我是否可以实时自动更新网页上 main_programme_category 字段的 StringField，以便即使在提交表单之前，该字段也会根据 program_sub_category 的选择自动更新？ Flask-WTForms 是否允许这种功能？

【问题讨论】：

您可以使用 JavaScript 来实现。既然它在网页上，您是否有理由要返回服务器并为此使用 WTForms？
不，不是真的，我只是对 Web 开发不是很有经验，也不知道它可以用 Javascript 完成。是不是很直接？
是的，尤其是使用 jquery - 如果你可以包含它的话。

标签： postgresql flask wtforms flask-wtforms

【解决方案1】：

由于这是客户端，您可以使用 JavaScript 轻松完成此操作：

最简单的方法是使用 jQuery。请参阅他们的示例部分：https://api.jquery.com/change/

他们使用div 而不是input 字段，但想法是一样的。在您的情况下，由于它是标准下拉列表，因此可以修改示例：

...
<select name="programme_sub_category">
  <option val="ROT">EVENT</option>
  <option val="LIVE MUSIC">LIVE MUSIC</option>
  <option val="LIVE MUSIC">CONCERT</option>
  <option val="LIVE MUSIC">OPERA</option>
  <option val="UNPUBLISHED">REHEARSAL</option>
  ...
</select>
<input name="main_programme_category" type="text" />

<script>
$( "select" ).change(function () {
    var str = $( "select option:selected" ).val();
    $( "input" ).val( str );
});
</script>
...

===========

如果您的下拉菜单没有像示例一样显示在您的页面上，您可能必须发布一个 HTML 外观示例。

【讨论】：