PDA

View Full Version : dropdown that shows information to the right



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


<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>

...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.

THANKS

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

http://jsbin.com/ehibu3/2

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

howie2009
01-26-2011, 08:01 AM
Hi,
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;

THANKS

akosiana
01-26-2011, 08: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';
}

}

</script>

<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, 08: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>
</select>
<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];

}
</script>

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

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