Pug 模板 - 如何将下拉列表中的选项标记为选中

Question

我有一个 Pug 模板，它使用 Bootstrap 4 作为“布局”并从 Express/Mongoose 服务器接收数据。

我正在从 MongoDB 填充一个表单，以便可以编辑内容。我一直在寻找根据 mongoDB 文档中的值使下拉列表“选择”一个选项的方法。

我已经看到了从头开始构建下拉列表并将选项设置为“已选择”的方法，但是表单已经生成并且下拉列表已经到位。我只需要将该选项与 mongoDB 文档中的值进行匹配，并将该选项设置为在列表中显示。

Pug 模板如下:

.row
  .col-sm-6
    .form-group
      label.control-label.requiredField(for='propertyType')
        | Property Type
        span.asteriskField *
      .col-xs-12
        select#propertyType.select.form-control.input-lg(form='addProperty', name='propertyType')
          option(value='0') -- Select --
          option(value='6') Home
          option(value='7') Condo
          option(value='10') Single Family Home
          option(value='11') Town House
          option(value='12') City Apartment
          option(value='13') Villa


script.
  var propertyType = document.getElementById('propertyType');

  for (var i = 0; i < propertyType.options.length; i++) {

    if (propertyType.options[i].value = #{property.typeId}) {
        propertyType.options[i].selected = 'selected';
        propertyType.selectedIndex = i;
        break;
    }

  }

如果我保留列出的代码，那么获得新值的实际选项是第一个“--选择--”，它的值从“0”更改为“6”，这是来自 MongoDB 文档的值。

如果我更改 javascript 以将值 #{property.TypeId} 传递给“selectedIndex”，如下所示:

propertyType.selectedIndex = #{property.typeId};

然后索引的值发生变化并且“selected”选项更改为“6”，但这会选择选项的第 6 个选项，而不是值为“6”的选项。

下拉菜单是我似乎无法填充的唯一内容，因此将不胜感激任何帮助。

Answer 1

如果您只需要显示一个预先选择的选项，那么我认为您不需要为此使用 javascript。你可以试试这个:

.row
  .col-sm-6
    .form-group
      label.control-label.requiredField(for='propertyType')
        | Property Type
        span.asteriskField *
      .col-xs-12
        select#propertyType.select.form-control.input-lg(form='addProperty', name='propertyType')
          option(value='0', selected= true) -- Select --
          option(value='6', selected= property.id == 6) Home
          option(value='7', selected= property.id == 7) Condo
          option(value='10', selected= property.id == 10) Single Family Home
          option(value='11', selected= property.id == 11) Town House
          option(value='12', selected= property.id == 12) City Apartment
          option(value='13', selected= property.id == 13) Villa

假设此下拉列表显示对应于 property.id 的值，它将标记 selected option 的属性为真其值与 property.id 中的值匹配.否则，默认情况下将显示第一个选项。