Javascript 使用选定的HTML选项重新呈现表单
Javascript 使用选定的HTML选项重新呈现表单,javascript,html,express,ejs,Javascript,Html,Express,Ejs,我有一个表单，如果有任何错误，它会重新呈现，并使用任何有效的输入重新呈现。我还想使用元素中的所选选项重新呈现表单，但我仍在努力
// controller.js
(req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.render("quotes", {
form: req.body,
元素中的所选选项重新呈现表单，但我仍在努力
// controller.js
(req, res, next) => {
const errors = validationResult(req);
if (!errors.isEmpty()) {
res.render("quotes", {
form: req.body,
errors: errors.array(),
yes: 'selected'
});
return;
// quotes.ejs
<label for="propertyType">Type of Property</label> <br />
<select name="propertyType">
<option value="Building Lot">Building Lot</option>
<option value="Condo - Appartment">Condo - Appartment</option>
<option value="Co-op">Co-op (Owned)</option>
<option value="Duplex">Duplex</option>
// my poor solutions below
<option selected value="<%= locals.form? form.propertyType : '' %>"><%= locals.form? form.propertyType : '' %></option>
<option value="Single Family Home" <% if (locals.errors) { %> selected="<%- yes %>" <% } %>>Single Family Home</option>
</select>
//controller.js
（请求、恢复、下一步）=>{
常量错误=验证结果（req）；
如果（！errors.isEmpty（））{
res.render（“引号”{
表格：要求正文，
错误：errors.array（），
是：'选定'
});
返回；
//quotes.ejs
属性类型标签中（我知道它们可能是糟糕的解决方案，这就是为什么我在这里）
if (!errors.isEmpty()) {
res.render("quotes", {
selected: req.body.propertyType,
errors: errors.array()
});
....
// html code
<label for="propertyType">Type of Property</label> <br />
<select name="propertyType">
<option value="Building Lot">Building Lot</option>
<option value="Condo - Appartment">Condo - Appartment</option>
<option value="Co-op">Co-op (Owned)</option>
<option value="Duplex">Duplex</option>
</select>
// html code
<% if (locals.errors) { %>
// the following will run only if errors exist
<script>
var selectedInput = "<%= selected %>";
var options = document.querySelector('[name="propertyType"]');
for (var i = 0; i < options.length; i++) {
if (selectedInput === options[i].value) {
options[i].selected = 'selected';
break;
}
}
</script>
<% } %>
//html代码
属性类型