使用选定的 HTML 选项重新呈现表单

Question

我有一个表单，如果有任何错误，它会重新呈现，并且它会根据任何有效输入重新呈现。我还想在 < select > 元素中使用 selected 选项重新呈现表单，但我正在努力

// 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>

我最接近的解决方案在最后 2 个

如有任何帮助，我们将不胜感激！谢谢:)

Answer 1

最好的解决方案是 post 您通过 AJAX 请求。这样您就不会重新呈现页面，并且可以保留您的输入数据。

既然你选择了re-render选项，我能想到的最优雅的方式就是通过客户端javascript。
首先，在你的控制器函数中，return selected 输入值

if (!errors.isEmpty()) {
     res.render("quotes", {
         selected: req.body.propertyType,       
         errors: errors.array()
     });
     ....

在 quotes.ejs 里面，你只需添加一个小脚本

// 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>
<% } %>

如果出现任何呈现错误，脚本将运行。它循环 select 输入的选项，并检查选项值是否等于提交的值。如果为真，则选项 selected.

使用选定的 HTML 选项重新呈现表单

re-render form with selected HTML option

html

javascript

ejs

express