News: Combo box with description

Home News Photos News Videos News Cartoons News Blogs RSS

Home > Java Scripts Examples and Tutorials > Combo box with description

Combo box with description

A combo box that also displays a short description of the selected link in a form box.

Sunday, Nov 26, 2006 | 1948 Views | Comments [View/Post]

Simply insert the below into the <body> section of your page. You can add in as many <option> tags into the selection list as you wish. The description associated with each selection is contained within variables "descriptions[0]", "descriptions[1]", etc. If you have more selections, add more variables, changing the index number to match the selection it is intended to describe.


This free script provided by
JavaScript Kit

<center>
<form name="combowithtext">
<select name="example" size="1" onChange="showtext()">
<option value="http://www.cnet.com">Cnet</option>
<option value="http://www.cnn.com">CNN</option>
<option value="http://www.geocities.com">Geocities</option>
</select>
<input type="button" value="Go!"
onClick="gothere()"><br>
<textarea rows=5 cols=21 wrap="virtual" name="text"></textarea>
<script language="javascript">
<!--

/*
Combo box with description credit-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free script here!
*/

var shortcut=document.combowithtext
var descriptions=new Array()

//extend this list if neccessary to accomodate more selections
descriptions[0]="Click here for Cnet, the primer technology site on the net!"
descriptions[1]="Click here for CNN, one of the best sources online to get your news."
descriptions[2]="Click here for Geocities, and receive 10 megs of free web space."


shortcut.text.value=descriptions[shortcut.example.selectedIndex]
function gothere(){
location=shortcut.example.options[shortcut.example.selectedIndex].value
}

function showtext(){
shortcut.text.value=descriptions[shortcut.example.selectedIndex]
}
//-->
</script>

</form>
</center>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>


Comment on this article
Guidelines: You must register with a social media account such as Facebook, Twitter, Yahoo, etc. to comment on this story. Click on the "Login" button below to choose your login account of choice. We welcome your thoughts, but this is not an open forum. For the sake of all readers, please refrain from the use of obscenities, personal attacks or racial slurs. All comments must remain on topic and cyber bullying will not be tolerated. All comments are subject to our terms of service. Comments that do not comply may be removed. Repeat offenders will lose commenting privileges.
News Other Language
World News
Movie News
Information
Travel News