Javascript selection list and selection appears in a box
<p>I am trying to understand how to achieve something for my website. The problem that I am having is to have a selection list with 24 options, you then select an option and the details relevant to that option in the database appears in a DIV or a box on the same page below, then you select a second option and it appears close to the first selection on the page and the same with the third option, and of course a way to remove the selected as well. I would like the selection list to be Javascript in preference due to the html selection boxes being not very good to look at.</p>

<p>Any help or suggestions would be great in order to put me in the right direction!.</p>

<p>Thanks a lot</p>

<pre><code>&lt;script type="text/javascript" language="javascript"&gt;
var pos = 0;
function showPic (whichpic) { 
if (document.getElementById) { 
try {
if ((document.getElementById('placeholder1').src+
document.getElementById('placeholder2').src+
document.getElementById('placeholder3').src).search(whichpic.href) &gt; -1)
throw "blah";
document.getElementById('placeholder'+ ++pos).src = whichpic.href;
//document.getElementById('placeholder2').src = whichpic.href;
//document.getElementById('placeholder3').src = whichpic.href;
if (whichpic.title) { 
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
} else { 
document.getElementById('desc').childNodes[0].nodeValue =      whichpic.childNodes[0].nodeValue; 
}
return false; 
} catch(e) {
alert("u mad?");
return false;
}
} else { 
return true; 
}
}
&lt;/script&gt;

&lt;div style="border: 1px solid #999; padding: 1em; margin: 0 0 15px 0;"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a onclick="return showPic(this)" href="http://jsfiddle.net/img/ico-add-    resource.png" title="img 1"&gt;img 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a onclick="return showPic(this)" href="http://jsfiddle.net/img/info-close.png"   title="img 2"&gt;img 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a onclick="return showPic(this)" href="http://jsfiddle.net/img/keys.png"  title="img 3"&gt;img 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p id="desc"&gt;Choose an image to begin&lt;/p&gt;
&lt;img id="placeholder1" src="http://jsfiddle.net/img/shadow.gif" alt="" /&gt;
&lt;img id="placeholder2" src="http://jsfiddle.net/img/shadow.gif" alt="" /&gt;
&lt;img id="placeholder3" src="http://jsfiddle.net/img/shadow.gif" alt="" /&gt;
&lt;/div&gt;
</code></pre>
