带有 EJS 的 HTML 选择选项答案

【问题标题】：HTML select option with EJS带有 EJS 的 HTML 选择选项
【发布时间】：2016-04-25 00:12:06
【问题描述】：

我正在为我的 Web 应用程序进行配置，尝试将其呈现到网页。以下是我的代码的一部分。我想把选项选到config[0].volume 了。因此，如果config[0].volume 为“50”，则所选选项将为“50”。代码运行良好。但我想知道。 “我怎样才能缩短这个代码？”我的代码太冗长了。

<select id="volume">

  <option value="1" <%= config[0].volume == '1' ? 'selected' : ''%>>1</option>
  <option value="5" <%= config[0].volume == '5' ? 'selected' : '' %>>5</option>
  <option value="10" <%= config[0].volume == '10' ? 'selected' : '' %>>10</option>
  <option value="50" <%= config[0].volume == '50' ? 'selected' : '' %>>50</option>
  <option value="75" <%= config[0].volume == '75' ? 'selected' : '' %>>75</option>
  <option value="100" <%= config[0].volume == '100' ? 'selected' : '' %>>100</option>

</select>

我想了大约 2 个小时，但没有任何结果。也许我必须使用 jQuery 或 JavaScript，并添加属性来拥有它，

attr('selected')... ?

我不知道，你能帮帮我吗？

【问题讨论】：

标签： javascript jquery ejs

【解决方案1】：

您可以根据选项值将其放入循环中。

<select id="volume">

<%
var options = [ "1", "5", "10", "50", "75", "100" ];
for ( var i = 0; i < options.length; i++ )
{
    var selected = ( config[0].volume == i ) ? "selected" : "";
    %><option value="<%=options[ i ] %>" <%=selected %>><%=i %></option><%
}
%>
</select>

【讨论】：

当我尝试这样做时我在下拉部分中看到“请选择贷款状态”，但我需要在输入框中打印“数据”中的值。有什么帮助吗？我在这里问是因为这只是一个小小的改变（我希望）。
@HemM 你是什么意思？
我有表单它有下拉（活动，不活动，拒绝）我从下拉列表中选择一个（假设活动）并提交。它进入发布请求（即 app.post() ），当它不成功时，我想将数据作为响应发送回 FORM 以重新提交.....现在，我正在尝试获取下拉值（ ACTIVE）来自响应数据，但我在下拉字段中看到的是“请选择贷款状态”而不是 ACTIVE。 @DonRhummy

【解决方案2】：

当前答案有误，所以我想分享我找到的解决方案。

对于我的示例，我正在制作一个闹钟，并希望在选择下拉列表中输入“小时”值（0 到 12）。

<select name="hour">
  <% var options = []; %>
  <% for(var i = 0; i <= 12; i++) { %>
    <option value='<%= i %>'><%= i %></option>
  <% } %>
</select>

请注意，name="hour" 用于在通过 POST 请求时识别所选值。假设您正在运行类似的设置，您可以使用req.body.hour 获取此值。

服务器端：Node.js / Express
客户端：EJS/HTML

【讨论】：

【解决方案3】：

为什么不使用 jQuery（或纯 JS）？

<p class="row ">
    <label class="col-lg-12">Language</label>
    <select id="lang" class="input col-lg-12">
        <option hidden value="">Select one</option>
        <option value="ru">Russian</option>
        <option value="en">English</option>
        <option value="ua">Ukranian</option>
    </select>
    <script defer>
        jQuery('#lang').val("<?= newsPost.lang ?>")
    </script>
</p>

【讨论】：

与计划JS：<script defer>document.getElementById('lang').value = "<?= newsPost.lang ?>";</script>