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>

使用ejs在下拉列表中显示数据时出现问题

1 个答案: