使用ejs在下拉列表中显示数据的问题

Question

我有一个个人资料页面，显示用户选择性别的性别下拉列表。当我选择性别并更新配置文件时，数据已成功保存到MongoDB。

问题是每当我去编辑配置文件页面时，虽然配置文件数据返回到页面，但显示选项中的第一个值我不知道如何在ejs模板中显示数据库中的选定值。以下是我的模板下拉列表的代码：

< div class="input-field col s6">
  < select name="gender">
    < option value="--Select--" disabled> Choose your gender
    < /option>< option value="0"> Female< /option>
    < option value="1"> Male< /option>
  < /select>
  < label> Select Gender
  < /label>
< /div>

我的个人资料代码：

router.get('/profile/:member_id', ensureAuthenticated, (req, res) => {

  Profile.findOne({
      member_id: req.params.member_id
    })
    .then(profile => {

      if (req.params.member_id != req.user.member_id) {
        req.flash('error_msg', 'Your are not authorized to update this profile.');
        res.redirect('/user/userdashboard/1');
      } else {
        res.render('user/profile', {
          profile: profile
        });
      }
    })
    .catch(error => {
      console.log('could not find user profile');
    });

});

如何在我的ejs模板下拉列表中显示从我的数据库返回的值作为已选择的选项？

Answer 1

在您的下拉HTML中，您可以切换相应的<option>标记的selected属性：

<select name="gender">
  <option value="--Select--" disabled>Choose your gender</option>
  <option selected=<%= profile.gender === "Female" %> value="0">Female</option>
  <option selected=<%= profile.gender === "Male" %> value="1">Male</option>
</select>