Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 290
ton1 Avatar asked Jan 19 '16 13:01

ton1


People also ask

Can you use EJS in HTML?

You now are able to have JS- and HTML-syntax coexist in one file using EJS. You can pass data from the server-side directly into the client-side HTML. You can use Express to send data directly to the respective EJS file.

How do I connect EJS to HTML?

Use <% - include( 'RELATIVE/PATH/TO/FILE' ) %> to embed an EJS partial in another file. The hyphen <%- instead of just <% to tell EJS to render raw HTML. The path to the partial is relative to the current file.

Why is EJS used instead of HTML?

If you want to render a static page then go for an HTML file and if you want to render a dynamic page where your data coming from various sources then you must choose an EJS file. Good for the static web page.

Do companies use EJS?

21 companies reportedly use EJS in their tech stacks, including Angry Ventures, My Franchise, and productdevelopment.


2 Answers

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>
like image 121
Don Rhummy Avatar answered Sep 20 '22 12:09

Don Rhummy


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
like image 40
mster Avatar answered Sep 19 '22 12:09

mster