show image of selected values in a multiple <option select> listbox

[edoaper]

Any help is appreciated.


I have the following code, which shows an image as it is selected from the selection box:

<script language="JavaScript1.2" type="text/javascript">
function showimage()
{
document.images.icons.src="images/"+document.Admin.samples.options[document.Admin.samples.selectedIndex].value;
}
</script>

<select size="3" name="samples" multiple onChange="showimage()">
<option value="current-electric.jpg">current.jpg</option>
<option value="ifunction.jpg">ifunction.jpg</option>
<option value="ifunction-bw.jpg">ifunction-bw.jpg</option>
<option value="mir-printing.jpg">mir-printing.jpg</option>
<option value="prisma.jpg">prisma.jpg</option>
</select>
<img src="clear.gif" name="icons" border=0 height="50">


Now I am trying to do the same thing with Multiple selection list but I can't figure it out.

Here is what I have based on a posting from this forum:


<script language="JavaScript">
function getSelectedValues ()
{
var r = new Array();
for (var i = 0; i < select.options.length; i++)
if (select.options[i].selected)
{
document.images.icons[r.length].src = "images/"+select.options[i].value;
}
}
</script>

<select name="samples" size="5" multiple id="required" onChange="myArray=getSelectedValues()">
<option value="current-electric.jpg">current.jpg</option>
<option value="ifunction.jpg">ifunction.jpg</option>
<option value="ifunction-bw.jpg">ifunction-bw.jpg</option>
<option value="mir-printing.jpg">mir-printing.jpg</option>
<option value="prisma.jpg">prisma.jpg</option>
</select>
<img src="images/clear.gif" name="icons0" border=0 height="50">
<img src="images/clear.gif" name="icons1" border=0 height="50">
<img src="images/clear.gif" name="icons2" border=0 height="50">
<img src="images/clear.gif" name="icons3" border=0 height="50">
<img src="images/clear.gif" name="icons4" border=0 height="50">


Any help would be Highly Appreciated.

ThanX in advance!

[Exuro]

Okay, I'd suggest doing this by going through the Select element and seeign which objects are selected, then displaying the images inside a division. The JavaScript functio you'd use would probably look something like this:

<script type="text/javascript">
<!--
function showimage() {
var htmlStr="";
var option = document.getElementById(event.srcElement.id);
for (i=0;i<option.options.length;i++) {
if (option.options[i].selected) {
htmlStr+='<img src="../../../new/images/LT/';
htmlStr+=option.options[i].value;
htmlStr+='" /><br />';
}
}
document.getElementById('imgDisp').innerHTML = htmlStr;
}
//-->
</script>

You would also have to slightly change the body of your document to work with this code:

<select size="3" id="Final_Version" multiple onChange="showimage()">
<option value="current-electric.jpg">current.jpg</option>
<option value="ifunction.jpg">ifunction.jpg</option>
<option value="ifunction-bw.jpg">ifunction-bw.jpg</option>
<option value="mir-printing.jpg">mir-printing.jpg</option>
<option value="prisma.jpg">prisma.jpg</option>
</select>
<div id="imgDisp"></div>

Well, I hope that works for you!

[edoaper]

ThanX Exuro,

I did it and it works fine.

Right to the point.