下拉菜单在页面处理后始终显示第一个选项，而不是处理后的选项、Node JS、Express-Handlebars

Question

当我选择一个选项并单击提交按钮时，它再次呈现视图，查询很好，但下拉菜单不是显示已处理的选项，它实际上总是显示第一个选项而不是我选择的选项

这是节点js代码，

 res.render('showtimes/themLichChieu', {
                            title: 'Thêm Lịch Chiếu Phim',
                            listPhim:dsPhim,
                            listPC:dsPC,
                            notificationErr:notificationErr,
                            ngayChieu: req.body.ngayChieu,
                            caChieu: req.body.caChieu,
                            giaPhim: req.body.giaPhim,
                            idPhongChieu: req.body.idPhongChieu,
                            idPhim: req.body.idPhim,
                        });

这是视图中的下拉列表：

                    <select id="idPhim" name="idPhim" class="form-control">
                        {{#each listPhim}}
                        <option name="{{this.idPhim}}" value="{{idPhim}}">{{this.tenPhim}</option>
                        {{/each}}
                    </select>

我希望当我从第一个渲染此视图并在单击按钮再次渲染视图后选择下拉列表中的项目时，我之前选择的项目将显示在下拉列表中，而不是默认项目。谢谢你们帮助我，祝你们有美好的一天。

Answer 1

您需要将

selected

属性添加到与用户在 POST 请求正文中发送到服务器的

idPhim

值相对应的选项。

我们需要的第一件事是一个自定义的Handlebars helper，它允许我们比较两个值并渲染模板的分支仅当这些值相等时。这个助手到底应该去哪里取决于您的 express-handlebars 的配置和初始化，但它看起来像这样：

helpers: {
  eq(val1, val2, options) {
    return val1 === val2 ? options.fn(this) : options.inverse(this);
  }
}

接下来，我们将更新我们的模板以使用这个新的助手。从您的帖子中可以看出，我们的模板数据中已经将提交的值设为

idPhim

。我们需要注意的是避免混淆属于

idPhim

迭代中当前对象的

listPhim

和根模板数据对象上被分配了

idPhim

值的

req.body.idPhim

。要访问后者，我们可以使用 path prefix（如

../idPhim

所示）来提升上下文级别；但是，在这种情况下，我将使用 @root 数据变量，因为我认为它更明确，因此将有助于澄清：

<option
  name="{{this.idPhim}}"
  value="{{this.idPhim}}"
  {{#eq this.idPhim @root.idPhim}}selected{{/eq}}
>{{this.tenPhim}}</option>

在我们的模板中添加此内容后，

listPhim

中的

idPhim

等于

@root.idPhim

的项目将把

selected

属性添加到其

<option>

输出中，从而在渲染页面时使其成为选定值通过用户的网络浏览器。