如何在Pug中无需JavaScript动态设置下拉选框默认选项？

你完全可以通过Pug的模板语法直接设置下拉框的默认选中项，不需要依赖JavaScript。具体实现如下：

修改后的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

实现逻辑 #

Pug会根据你传入的event_day变量，自动为匹配的选项添加selected属性。比如如果event_day的值是"Wednesday"，对应的<option>标签会被渲染成：

<option selected="selected">Wednesday</option>

页面加载时该选项就会自动成为默认选中项。

如果后端传入的event_day是数字格式（比如0代表周日、1代表周一），只需要把判断条件改成对应数字即可：

option(selected=event_day === 0) Sunday
option(selected=event_day === 1) Monday
// 后续选项依次对应修改

注意点 #

要保证event_day的值和选项的判断内容完全匹配（包括大小写），否则选中逻辑不会生效。

内容的提问来源于stack exchange，提问作者Nazar Kopelchak