CODEWITHSUNDEEP
javascripthtmlejs
Tim Mwaura
Tim Mwaura

Reputation: 619

How to populate select option:select dynamically

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?

Upvotes: 0

Views: 407

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

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>

Upvotes: 1

Related Questions