View Full Version : dropdown that shows information to the right

01-25-2011, 09:48 PM
Hi Guys
I'm trying to find a way to insert a dropdown eg:


...place the dropdown to the left and have an information panel to the right.
i.e. if a user chooses Volvo a panel to the right would appear saying eg "Volvo is a strong car"
and so on for other selections eg "Audi is a fast car" if the user selects Audi in the dropdown.


01-25-2011, 10:05 PM
Something like that?


01-26-2011, 08:30 AM
THANKS A MILLION! Yes exactly that.
Really appreciate the help!
Have a great day!:thumbsup:

01-26-2011, 09:01 AM
Out of curiosity. How could I adjust the code to list items eg:

volvo =>... volvo is great
................volvo is strong
...............volvo is fast

saab =>.... saab is great
........ .......saab is stylish

Is there something I can do here: case 1: car = 'Volvo is great'; break;


01-26-2011, 09:24 AM
If you want this, you need to go out of <select></select>
Just use a listing <li></li> inside <div> </div> for scrolling(if you want scroll effect). Then do javascripts.

See Below:

<script type="text/javascripts">

function putdesc(strid)

if(strid = 'volvo')
document.getElementById('spanvolvo').innerHTML = 'volvo is a cute car';

if(strid = 'saab')
document.getElementById('spansaab').innerHTML = 'saab is a cute car';

if(strid = 'mercedes')
document.getElementById('spanmercedes').innerHTML = 'mercedes is a cute car';

if(strid = 'audi')
document.getElementById('spanaudi').innerHTML = 'audi is cute car';



<li><a href="#" id="volvo" onClick="putdesc(this.id)" >Volvo</a> <span id="spanvolvo"></span></li>
<li><a href="#" id="saab" onClick="putdesc(this.id)" >Saab</a> <span id="spansaab"></span></li>
<li><a href="#" id="mercedes" onClick="putdesc(this.id)" >Mercedes</a> <span id="spanmercedes" ></span></li>
<li><a href="#" id="audi" onClick="putdesc(this.id)" >Audi</a> <span id="spanaudi"></span></li>

If you have multiple descriptions per car, you can put the descriptions in array.

Philip M
01-26-2011, 09:37 AM
Try this:-

<select id = "myCars" onchange = "show()">
<option value = 0>Choose a car.......</option>
<option value = 1>Volvo</option>
<option value = 2>Saab</option>
<option value = 3>Mercedes</option>
<option value = 4>Audi</option>
<div id = "notes" class = "contentbox" ></div>

<script type = "text/javascript">

var details = [];
details[0] = "";
details[1] = "Volvo is a strong car<br>Volvo is a tough car";
details[2] = "Saab is a Swedish car";
details[3] = "Mercedes is a luxury car";
details[4] = "Audi is a fast car";

function show() {
var val = document.getElementById("myCars").value;
document.getElementById("notes").innerHTML = details[val];


You can use CSS to style the div display properties to your liking.

Well, it's a brighter day today than it was yesterday, at least it was before it got dark ........ Commentator, Radio 5 Live

01-26-2011, 10:53 AM
Superb! Thanks Guys!