Question

I am setting name of few countries List in Session Object. I need to populate a dropdown in my JSP using this List and also add the Flag Images before each country name in the select option dynamically.
The below code does not work:

    <select id="refSelect" onChange="refreshRefList();" name='refSelect'>
     <c:forEach var='flag' items="${sessionScope.flagList}">
      <option value="${flag}">
        <img src="./images/${flag}.PNG"/> <c:out value="${flag}" />
      </option>
     </c:forEach>
    </select>

I also tried to achieve this using CSS using below link but it failed for session List and only works in Firefox browser:

• How to add a images in select list

Seems like normal default Dropdown control does not support images. Can anyone help me to achieve this using Javascript/CSS/Custom taglib. I don’t want to use jQuery in my codes.

Answer 1

Add a textbox,

create a

<ul id="country_dropdown"><li><img src="urimage.png"/>Country</li>...</ul>

on focus on the textbox, show country_dropdown, on blur or on click on li hide the ul.

no jquery needed to achieve that.

also the use div instead of textbox and maintain the value as hidden.