Question

I want to pass the multiple values of certain item from jsp to Javascript. Due to my requirement, I need to use Div and within that div, will loop to print out the data.

On the double of certain item row, I want to pass the multiple values from jsp to Javascript.

NOTE: Due to requirement, I can’t use select tag, instead need to use Div.

For now, when I use to pass ${food.foodItemId} in showDetailData() method, no data has been passed to Javascript.

<div class="scroller" ondblclick="showDetailData(${food.foodItemId},'m','desktop');">
        <c:forEach var="food" varStatus="i" items="${foodItemList}">
            <c:out value="${food.foodName}"/>
            <br><br>
        </c:forEach>
</div>

How can I pass the multiple values with such format [ food.foodItemId~food.foodCategoryId~food.foodName~food.foodPortionName] to Javascript on double click of certain data row like in below code (which was using select tag)?

Example like below:

<option value="<c:out value="${food.foodItemId}"/>~<c:out value="${food.foodCategoryId}"/>~<c:out value="${food.foodName}"/>~<c:out value="${food.foodPortionName}"/>" ><c:out value="${food.foodName}"/></option>

Answer 1

I got the solution that matches with my requirement.

I used ul and li tag insides the div which solves my issue and use double click event on ul tag.

<div class="scroller">
    <c:forEach var="food" varStatus="i" items="${foodItemList}">
    <c:set var="foodInfo" value="${food.foodItemId}~${food.foodCategoryId}~${food.foodName}~${food.foodPortionName}"/>
    <ul class="scroller_result" ondblclick="showDetailData('${foodInfo}','m','desktop');"">
        <li><c:out value="${food.foodName}"/>
        </li>
    </ul>
    </c:forEach>
</div>