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 config[0].volume is '50', The selected option will be '50'. The codes are working well. But I wondered. 'How can I shorten this code?' So verbose with my code.

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

I think about 2 hours, but nothing comes up. Maybe I have to use jquery or javascript , and add attribute to has it,

attr('selected')... ?

I have no idea, Could you help me..?

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

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

来源：https://stackoverflow.com/questions/34878180/html-select-option-with-ejs

标签

javascript

jquery

ejs