当我选择一个选项并单击提交按钮时，视图再次呈现，查询很好，但不是下拉菜单显示提交的选项，它实际上总是显示第一个选项。
下面是node js中的所有代码，
let dsPhim=[];
let dsPC=[];
class lichChieu{
// GET[]/lichchieu/them
async themLichChieu(req,res){
try {
const queryPhim = 'SELECT * FROM Phim WHERE hienThi=1 AND trangThai=1';
const queryPC = 'SELECT * FROM PhongChieu WHERE trangThai=1';
connection.query(queryPhim,(err,resultsPhim)=>{
dsPhim=resultsPhim;
connection.query(queryPC,(err,resultPC)=>{
dsPC=resultPC;
res.render('showtimes/themLichChieu', {
title: 'Thêm Lịch Chiếu Phim',
listPhim: dsPhim,
listPC: dsPC
});
})
})
} catch (err) {
console.error('Lỗi', err.message);
}
}
// POST[]/lichchieu/them/luu
async luuLichChieu(req, res) {
let notificationErr=[];
let notificationSuccess=[];
const ngayChieu = req.body.ngayChieu;
const caChieu = req.body.caChieu;
const giaPhim = req.body.giaPhim;
const idPhongChieu = req.body.idPhongChieu;
const idPhim = req.body.idPhim;
const checkQuerry=`SELECT COUNT(*) AS count FROM lichchieu WHERE caChieu=? and ngayChieu=? and idPhongChieu=?`;
const checkValues=[caChieu,ngayChieu,idPhongChieu];
connection.query(checkQuerry,checkValues,(errCheck,checkResult)=>{
if(checkResult[0].count>0){
notificationErr.push({err:'Ca chiếu trong ngày này đã có lịch chiếu'});
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,
});
}else{
const insertQuery = `INSERT INTO LichChieu (ngayChieu, caChieu, giaPhim, ngayThem, hienThi, idPhongChieu, idPhim)
VALUES (?, ?, ?, ?, ?, ?, ?)`;
const insertValues = [
ngayChieu,
caChieu,
giaPhim,
new Date(),
1,
idPhongChieu,
idPhim
];
connection.query(insertQuery, insertValues, (err, results) => {
if (err) {
console.error('Lỗi', err.message);
notificationErr.push({err: err.message});
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,
});
} else {
notificationSuccess.push({success:"Thêm lịch chiếu thành công"})
res.render('showtimes/themLichChieu', {
title: 'Thêm Lịch Chiếu Phim',
notificationSuccess: notificationSuccess,
listPhim:dsPhim,
listPC:dsPC,
ngayChieu: req.body.ngayChieu,
caChieu: req.body.caChieu,
giaPhim: req.body.giaPhim,
idPhongChieu: req.body.idPhongChieu,
idPhim: req.body.idPhim,
});
}
const updateQuerry=`UPDATE Phim SET trangThai=2 WHERE idPhim=?`;
const idPhim=[req.body.idPhim];
connection.query(updateQuerry,[idPhim],(errUpdate,updateResults)=>{
if(errUpdate){
console.error('Lỗi update trạng thái phim',errUpdate.message)
return;
}
console.log('Cập nhật trạng thái phim thành công')
})
});
}
})
}这是导入helper的代码
handlebars.engine({
defaultLayout: 'main',
extname: '.hbs',
layoutsDir: __dirname + '\\src\\views\\layouts\\',
partialsDir: __dirname + '\\src\\views\\',
helpers: {
sum: (a, b) => a + b,
formatDate:(date) => moment(date).format('MM/DD/YYYY'),
paginate: paginateHelper.createPagination,
formatCurrency: (number, currencyCode) => {
const formatter = new Intl.NumberFormat('vi-VN', {
style: 'currency',
currency: currencyCode,
});
return formatter.format(number);
},
eq(val1, val2, options) {
return val1 === val2 ? options.fn(this) : options.inverse(this);
},
},
})
);这是提交的表格
<form action="/lichchieu/them/luu" method="POST" class="container-form-add mx-auto" style="max-width: 900px;">
<div class="row">
<div class="col-sm-12">
<div class="mb-3">
<label class="form-label" for="idPhim">Tên Phim</label>
<select id="idPhim" name="idPhim" class="form-control">
{{#each listPhim}}
<option name="{{this.idPhim}}" value="{{this.idPhim}}" {{#eq this.idPhim @root.idPhim}}selected{{/eq}}>{{this.tenPhim}}</option>
{{/each}}
</select>
</div>
<div class="mb-3">
<label class="form-label" for="idPhongChieu">Phòng chiếu</label>
<select id="idPhongChieu" value="idPhongChieu" name="idPhongChieu" class="form-control">
{{#each listPC}}
<option name="{{this.idPhongChieu}}" value="{{this.idPhongChieu}}" >{{this.tenPhongChieu}}</option>
{{/each}}
</select>
</div>
<div class="mb-3">
<label class="form-label" for="caChieu">Ca Chiếu</label>
<select id="caChieu" name="caChieu" value="{{caChieu}}" class="form-control">
<option name="" value="Ca 1: 8-10h">Ca 1: 8-10h</option>
<option name="" value="Ca 2: 13h-15h">Ca 2: 13h-15h</option>
<option name="" value="Ca 3: 16-19h30">Ca 3: 16-19h30</option>
<option name="" value="Ca 4: 20-23h">Ca 4: 20-23h</option>
</select>
</div>
<div class="mb-3">
<label class="form-label" for="showDate">Ngày chiếu</label>
<input class="form-control" value="{{ngayChieu}}" name="ngayChieu" required name="ngayChieu" id="ngayChieu" type="date" data-date="" data-date-format="DD MMMM YYYY" aria-describedby="helpId" />
</div>
<div class="mb-3">
<label class="form-label" for="price">Giá phim</label>
<input class="form-control" value="{{giaPhim}}" required type="number" name="giaPhim" id="giaPhim" aria-describedby="helpId" />
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary" type="submit" style="padding: 10px; min-width: 400px; font-weight: bold; margin: 10px;">Thêm mới</button>
</div>
</form>我希望当我第一次呈现这个视图并从下拉列表中选择一个项目，然后提交表单以再次呈现视图时，我提交的项目将显示在下拉列表中，而不是默认项目。谢谢你的帮助，祝你今天愉快。
1条答案
按热度按时间djp7away1#
您需要将
selected属性添加到与POST请求主体中用户发送到服务器的idPhim值相对应的选项中。我们需要的第一件事是一个自定义Handlebars帮助器，它允许我们比较两个值，并仅当 * 这些值相等时才呈现template * 的分支。这个helper应该放在哪里取决于express-handlebars的配置和初始化，但它看起来像这样：
接下来，我们将更新我们的模板以使用这个新的帮助器。从您的帖子中可以看出，我们已经在模板数据中将提交的值设置为
idPhim。我们需要注意的是避免混淆listPhim迭代中属于当前对象的idPhim和根模板数据对象上被分配了req.body.idPhim值的idPhim。要访问后者，我们可以使用路径前缀，如../idPhim，来逐步提升上下文级别;但是，在这种情况下，我将使用@root数据变量，因为我认为它更明确，因此将有助于澄清：在我们的模板中添加了这一项后，
listPhim中idPhim等于@root.idPhim的项将在其<option>输出中添加selected属性，从而使其在用户的Web浏览器呈现页面时成为选定值。