Drop Down Menu w/ Description

[chuckster]

How can I select the menu item and have it run without having to click a Go or Submit button? I want to avoid the extra step and I don't have room for the button.

[jscheuer1]

Give the select element an onchange attribute. Set it equal to the onclick event:

<select onchange="whatever the onclick for the button equaled">

[chuckster]

Sorry, I should have given you the link or the code. This is the form and select part, which is already using onChange to dropdown the menu options.

<form name="form1">
<select name="select1" size="1" style="font: 11px arial; padding-left: 6px; background-color:#FFFFFF" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">

Should I add an onClick?
<select onchange="whatever the onclick for the button equaled">

<option selected value="-1" class="text11">Quick Links</option>

link to original
http://www.dynamicdrive.com/dynamici...bodescribe.htm

Thanks.

[jscheuer1]

OK, from the demo, change this:

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" 
onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
 <input type="button" value="Go" 
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

to this:

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" 
onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1');jumptolink(document.form1.select1)">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
<br>
<!-- Button Removed & you may remove this too -->
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

[chuckster]

Bravo!
Thank you.

[chuckster]

One more thing, I tried removing <span id="textcontainer1" align="left" style="font:italic 13px Arial"> because I don't need it but that leaves me with an error then the links don't work. Does something in the script need to change to remove that?

[jscheuer1]

If you are going to go that 'bare bones', you need to remove:

displaydesc(document.form1.select1, thetext1, 'textcontainer1');

from the onChange event so now it will look like this:

onChange="jumptolink(document.form1.select1)"

and take these lines out of the script:

//2) Call function displaydesc() for each drop down menu you have on the page
//   This function displays the initial description for the selected menu item
//   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
//   Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

displaydesc(document.form1.select1, thetext1, 'textcontainer1')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')

At that rate there are other things you can remove from the script itself but, this is all that needs to be done to avoid the error. If you want to strip down the script though, all this may be removed (from the demo):

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"
thetext1[1]="Direct link to hundreds of free Java applets online!"
thetext1[2]="Up to date news on the technology front"
thetext1[3]="News.com- The #1 technology News site."
thetext1[4]="Web Coding and development forums"

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="CNN- US and World News."
thetext2[1]="MSNBC- NBC News online."
thetext2[2]="BBC News- Updated every minute of every day."
thetext2[3]="TheRegister- Daily IT news."

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}