时间戳

首页 > 解决方案 > 如何在 Express EJS 中显示数字的编辑值和选择字段

html - 如何在 Express EJS 中显示数字的编辑值和选择字段

问题描述

我正在尝试以 Html 形式显示数字的值并在 Express Ejs 中选择字段

我能够通过 StackOverflow 上的示例修复 textarea 字段。但没有数字字段和选择字段。文本字段也可以

 <form id="c_form-h" class="" method="post" method="post" action="/addbooks" style="padding: 5px;">  
                        <div class="form-group row">
                             <label for="addbookname" class="col-6 col-form-label">Book Name</label>
                         <div class="col-12">
                            <input type="text" value="<%=result.book_name %>" class="form-control" name="bookname" placeholder="Add Book Name"> 
                        </div>
                        </div>                      
                        <div class="form-group row">
                            <label for="addsummary" class="col-6 col-form-label">Summary</label>
                          <div class="col-12">  
                          <textarea class="form-control" name="summaries" placeholder="Write Some Description" rows="3"><%=result.summary %>    
                          </textarea>
                        </div>
                    </div>              
                        <div class="form-group row">
                            <label for="addcategory" class="col-9 col-form-label">Select Category</label>
                          <div class="col-12">
                            <input type="number" value="<%=result.isbn %>" class="form-control" name="isbn" placeholder="ISBN"> 
                        </div>
                        </div>    
                         <div class="form-group row">
                             <label for="addcategory" class="col-9 col-form-label">Select Category</label>
                           <div class="col-12">
                            <select class="form-control" value="<%=result.category %>" name="categories">
                              <option></option>
                              <option>Fruits</option>
                              <option>Intercontinental Foods</option>
                              <option>3</option>
                              <option>4</option>
                            </select>
                           </div>
                          </div>
                         <button type="submit" class="btn btn-primary">Submit</button>
                      </form>

标签： htmlnode.jsexpressejs

解决方案

首先，如果您的select选项是固定的，您应该创建一个包含它们的值的数组，并使用forEachejs 中的循环访问这些值。
在你的情况下，如果<%=result.category %>是你的五个选项之一，你可以使用这个：

<select class="form-control" name="categories">
    <option value="" <%= result.category === '' ? 'selected': '' %> ></option>
    <option value="Fruits" <%= result.category === 'Fruits' ? 'selected': '' %> >Fruits</option>
    <option value="Intercontinental Foods" <%= result.category === 'Intercontinental Foods' ? 'selected': '' %> >Intercontinental Foods</option>
    <option value="3" <%= result.category === '3' ? 'selected': '' %> >3</option>
    <option value="4" <%= result.category === '4' ? 'selected': '' %> >4</option>
</select>



如果您的选项是固定的，正如我之前提到的，您可以将它们包含在一个数组中optionsArray（例如optionsArray = ['', 'Fruits', 'Intercontinental Foods', '3', '4']并将其呈现为 ejs 文件。然后您可以像这样使用它：

    <select class="form-control" name="categories">
        <% optionsArray.forEach(op => { %>
            <option value="<%= op %>" <%= result.category === op ? 'selected': '' %>  ><%= op %></option>
        <% }); %>
    </select>

推荐阅读