I have a rich column which has this tag <img  src="#{PageUtil.baseUri()}#{item.imageLocation}" height="100"/>. This source takes you to an external folder which contains my images. on the same jsf page i have a drop down list of colors which when i select a color i should be able to swap my images on my datatable. my problem is am only able to swap only one image on the first row.

The below tag contains a drop down list of colors

<h:selectOneMenu id="selectDropDown" value="#{group.contractItemSelected}"  onchange="document.getElementByTagName('img').src= colorUrlMap[this.value];" style="margin-left: 1.8em;">

                                                  <f:selectItems value="#{group.contractItemsSelect}"/>

                                        </h:selectOneMenu>

Someone please help me out on this. if you need more information, please let me know.

Thanks in advance!!!!