0

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:

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.

Community
  • 1
  • 1
sunny_dev
  • 765
  • 3
  • 15
  • 34

2 Answers2

0

You may try JavaScript image combobox

Hope this helps.

Alfred
  • 21,058
  • 61
  • 167
  • 249
  • Hi @blasteralfred , thank for your link, but i have already visited it before. This link has mentioned it has dependency on jQuery. I don't want to use jQuery. Thanks. – sunny_dev May 14 '12 at 08:42
0

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.

skipy
  • 4,032
  • 2
  • 23
  • 19
  • hi @sk08. Thanks for you suggestion. I would really appreciate if you could show this with some actualy code example or give reference to any link where i can get reference from. Also will the above method work for a List of countries stored in Session Object or will it only work for some hard-coded countries names? – sunny_dev May 14 '12 at 08:46