选项"/>
在 Pug 中动态设置默认选择选项
我想知道是否可以在不使用 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 的情况下让它工作。
回答如下:我已经很久没有真正使用 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
.
希望这有帮助!
更多推荐
在 Pug 中动态设置默认选择选项
发布评论