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中的值相匹配。否则，默认情况下将显示第一个选项。

Answer 2

我在for循环中使用了Mohit Bhardwaj's answer来获得一个简单的解决方案。

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

<强>更新

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

我添加了一个'脚本'。每个<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;
  }

Answer 4

这是一种无需脚本标记或完全不展开循环的方法。

lock

这将使用属性设置语法将列表中的第一个选项设置为“选定”（如果在评估-var selected = true; select(id=field.id required=required) each op in field.options option(value=op name=field.name selected=selected) #{op} -if(selected){ -selected=false; -}时selected为true，它将附加标签）。

Answer 5

通过查看文档here，我找到了一个不需要javascript且可以内联的解决方案。

这就是我在代码中使用它的方式：

select(name="priority")
    each priority in priorities
        option(value=priority.id selected=(job.priority.id == priority.id) ) #{priority.name}

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

5 个答案: