使用EJS的HTML选择选项

Question

我正在为我的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')... ?

我不知道，你能帮我吗？

- ton1

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

- Don Rhummy

---

当我尝试执行以下操作时：<option value="<%= data.loanStatus %>">请选择贷款状态</option>，在下拉菜单中会显示“请选择贷款状态”，但我需要将“data”中的值打印到输入框中。有什么帮助吗？我在这里问是因为这只是一个小改变（我希望如此），类似于这个问题。 - Hem M

@HemM 你是什么意思？ - Don Rhummy

我有一个表单，其中有一个下拉菜单（ACTIVE、INACTIVE、REJECT），我选择其中一个（假设是ACTIVE）并提交。它会进入POST请求（即app.post()），当请求不成功时，我想将数据作为响应发送回表单以进行重新提交...现在，我正在尝试从响应数据中获取下拉菜单值（ACTIVE），但我能看到的是下拉菜单字段中显示的是“请选择贷款状态”，而不是ACTIVE。 - Hem M

@DonRhummy，现在已经很晚了，但是这个解决方案对我来说不起作用。每个选项都有selected（通过浏览器检查）。 - Asish

谢谢，这帮助了我今天的任务。 - sanketh s

Answer 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

- mster

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

- Victor Gorban

---

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