使用 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>