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属性标记为true,option其值与其中的值匹配property.id.否则,默认情况下将显示第一个选项.

Answer 2

我在for循环中使用Mohit Bhardwaj的答案来获得一个简单的解决方案.

select(name='image')
  option(value='' selected=!project.image) (empty)
  for img in images
    option(value=img.id selected=(img.id === project.image.id)) #{img.alt}

Answer 3

更新

希望可以回答我自己的问题。我确实尝试过莫希特的方法，但它对我不起作用。

我添加了一个“脚本”。每个<select>输入下的部分：

script.
  var pOptions = document.getElementById('propertyType').options;
  for (i=0; i < pOptions.length; i++) {
    if (pOptions[i].value == #{property.typeId}) pOptions[i].selected = true;
  }