Skip to content Skip to sidebar Skip to footer

HTML Select Option With EJS

I'm making a configuration for my web application, try to rendering it to web page. Below is part of my code. I want to the option selected to the config[0].volume has. So, if conf

Solution 1:

You can put it in a loop based on the option values.

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

Solution 2:

Had an error with the current answer, so I wanted to share my solution that I found.

For my example, I'm making an alarm clock and wanted 'hour' values in a select dropdown for input (0 through 12).

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

Note that name="hour" is used to identify the selected value when passed through a POST request. You can obtain this value using req.body.hour assuming you're running a similar set-up.

  • Server-side: Node.js / Express
  • Client-side: EJS/HTML

Solution 3:

Why not use jQuery (or plain 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>

Post a Comment for "HTML Select Option With EJS"