HTML select option with EJS

Question

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?

Apocarpous

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

Recession

when i try to do this <option value="<%= data.loanStatus %>">Please select loan Status</option> i get "Please select loan Status" in the dropdown section, but i need the value in "data" to be printed in input box. any help on this ?? i asked here since it's just a little change( i hope) similar to this. – Measurable

@HemM what do you mean? – Recession

I have form it has dropdown( ACTIVE,INACTIVE,REJECT) i choose one( assume ACTIVE) from drop down and submit it. it enters post request ( i.e app.post() ) and when it is unsuccessful i want to send back the data as response back to FORM for re-submission..... now, i'm trying to get the dropdown value(ACTIVE) from the response data but what i am able to see in dropdown field is "Please select loan status" instead of ACTIVE. @DonRhummy – Measurable

@DonRhummy It's very late, but this solution is not working for me. Every option has selected (upon inspection through Browser) – Kunming

thanks , this helped me out in my task today – Foreland

Answer 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

Formwork

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

Estevan

with plan JS: <script defer>document.getElementById('lang').value = "<?= newsPost.lang ?>";</script> – Rhubarb

Answer 4

<select id="volume">

<% options.forEach((subject,index) => { %>
  <option value="<%-options.id %>" <%= options[index] === index ? 'selected' : '' %>>
    <%- subject.title %>
  </option>
<%})%>
  
</select>

You can do something like this as well.

Chaschase