在 Pug 中动态设置默认选择选项

Question

我想知道是否可以在不使用 JavaScript 的情况下动态地在 pug 中设置默认选择选项？ 我在后端使用 Node.js + Express，当我渲染哈巴狗文件时，我还传递了一个包含数据的对象。 这是 Node.js 代码：

var eventToEdit = {
  event_event: rows[0].event_event,
  event_day: rows[0].event_day,
  event_start: rows[0].event_start,
  event_end: rows[0].event_end,
  event_phone: rows[0].event_phone,
  event_location: rows[0].event_location,
  event_info: rows[0].event_info,
  event_url: rows[0].event_url
};
res.render('editEvent', eventToEdit);

在我的哈巴狗 (editEvent.pug) 中，我有一个表单，其中一个标签是选择：

.form-group
 label(for='dayInput') Day of Week
 select#dayInput.form-control(name='day')
  option
   | Sunday
  option
   | Monday
  option
   | Tuesday
  option
   | Wednesday
  option
   | Thursday
  option
   | Friday
  option
   | Saturday

我想做的是使用

event_day

变量在选择标签中设置默认选项。但是，问题是我似乎无法在不使用 JavaScript 的情况下找到这样做的方法。

我能够使用 JavaScript 让它工作，但我想知道是否有可能在没有 JavaScript 的情况下让它工作。

Answer 1

我已经很久没有真正使用 Pug 了，我开始喜欢 handlebars，但据我所知，你可以在 Pug 的

select

标签中设置一个默认选项，而无需使用 JavaScript 就好了。只需使用条件

selected

属性根据

event_day

变量的值设置默认选项。以下是您可以在

editEvent.pug

文件中执行此操作的方法：

.form-group
  label(for='dayInput') Day of Week
  select#dayInput.form-control(name='day')
    option(selected=event_day === 'Sunday')
      | Sunday
    option(selected=event_day === 'Monday')
      | Monday
    option(selected=event_day === 'Tuesday')
      | Tuesday
    option(selected=event_day === 'Wednesday')
      | Wednesday
    option(selected=event_day === 'Thursday')
      | Thursday
    option(selected=event_day === 'Friday')
      | Friday
    option(selected=event_day === 'Saturday')
      | Saturday

在此代码中，每个

option

标签都有一个

selected

属性，该属性根据

event_day

变量评估条件。如果条件是

true

，选择的属性将被添加到选项中，使其成为默认选择的

option

.

希望这有帮助！

Answer 2

艾哈迈德的回答是正确的。我想添加这种使用循环的等效（但更简洁）方法：

.form-group
  label(for='dayInput') Day of Week
  select#dayInput.form-control(name='day')
    each day in ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
      option(selected= event_day === day) #{day}