How to populate select option:select dynamically

Question

I am encountering an issue with double values appearing in the dropdown, contrary to what I want.
I have a shopping cart with a drop down from which a user can select a cakesize which has a price as its value.
My setup is a that the cart is stored in a session in the browser so that the value he selected is stored.
My issue is that when I load the page, the selected cakesize appears twice, On the option selected and on the list.

<select name="cakesize" class="custom-select cakesize">
    <option selected value="<%=cake.currentPrice%>"><%=cake.currentCakeSize %></option>
    <option value="<%=cake.item.price['1000'] %>">1kg</option>
    <option value="<%=cake.item.price['1500'] %>">1.5kg</option>
    <option value="<%=cake.item.price['2000'] %>">2kg</option>
    <option value="<%=cake.item.price['2500'] %>">2.5kg</option>
    <option value="<%=cake.item.price['3000'] %>">3kg</option>
    <option value="<%=cake.item.price['3500'] %>">3.5kg</option>
    <option value="<%=cake.item.price['4000'] %>">4kg</option>
    <option value="<%=cake.item.price['4500'] %>">4.5kg</option>
    <option value="<%=cake.item.price['5000'] %>">5kg</option>
 </select>

Is it okay for it to remain this way?

Your code does not clear your question, share more details that how your site is storing and retrieving sessions. — Sooraj Abbasi, Jun 18 '20 at 09:46
You can check this link : https://stackoverflow.com/questions/6601028/how-to-populate-the-options-of-a-select-element-in-javascript — Pramod, Jun 18 '20 at 09:49

score 1 · Accepted Answer · edited Jun 18 '20 at 13:45

The proper way is as follows

<select name="cakesize" class="custom-select cakesize">

    <option value="<%=cake.item.price['1000'] %>" <%=cake.currentPrice == cake.item.price['1000'] ? 'selected' : '' %> >1kg</option>
    <option value="<%=cake.item.price['1500'] %>" <%=cake.currentPrice == cake.item.price['1500'] ? 'selected' : '' %> >1.5kg</option>
    <option value="<%=cake.item.price['2000'] %>" <%=cake.currentPrice == cake.item.price['2000'] ? 'selected' : '' %> >2kg</option>
    <option value="<%=cake.item.price['2500'] %>" <%=cake.currentPrice == cake.item.price['2500'] ? 'selected' : '' %> >2.5kg</option>
    <option value="<%=cake.item.price['3000'] %>" <%=cake.currentPrice == cake.item.price['3000'] ? 'selected' : '' %> >3kg</option>
    <option value="<%=cake.item.price['3500'] %>" <%=cake.currentPrice == cake.item.price['3500'] ? 'selected' : '' %> >3.5kg</option>
    <option value="<%=cake.item.price['4000'] %>" <%=cake.currentPrice == cake.item.price['4000'] ? 'selected' : '' %> >4kg</option>
    <option value="<%=cake.item.price['4500'] %>" <%=cake.currentPrice == cake.item.price['4500'] ? 'selected' : '' %> >4.5kg</option>
    <option value="<%=cake.item.price['5000'] %>" <%=cake.currentPrice == cake.item.price['5000'] ? 'selected' : '' %> >5kg</option>

</select>

Amazing! This did it! Thank you – Tim Mwaura Jun 18 '20 at 10:04 — Tim Mwaura, Jun 18 '20 at 10:04

How to populate select option:select dynamically

1 Answers1