Drop down menu with description help?

[Charina]

1) Script Title: Drop down menu w/description

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...bodescribe.htm

3) Describe problem: I would like to have more than two drop down menu's with descriptions. The problem is the first two drop downs appear on the webpage, however the extra two that I added do not appear at all.

Is it possible to have more than two?

[jscheuer1]

The demo page itself has two. If you follow the default installation instructions, you will have two. To add more, just follow the example. Each additional drop down needs to be in its own form with its own unique names and span id. The script calls for each form need to use these unique names and span id.

[Charina]

I am clearley clueless because I followed your instructions and the drop downs for the extra menus do not appear. Here's the codes for the two extra drop downs. I followed the examples for the first two provided on the sample page, however the additional two aren't working. Hopefully someone can see what I am clearly not.


<!--Drop down menu 3->
<form name="form3">
<select name="select3" size="1" style="color: #ffffff" style="background-color:#990000" onChange="displaydesc(document.form3.select3, thetext3, textcontainer3');jumptolink(document.form3.select3)">
<option value="0">My Favorite Authors</option>
<option value="http://www.cherryadair.com">Cherry Adair</option>
<option value="http://www.shelleybradley.com">Shelley Bradley</option>
<option value="http://206.67.55.177/">Tori Carrington</option>
<option value="http://www.pamelaclare.com">Pamela Clare</option>
<option value="http://www.jennifercrusie.com/">Jennifer Crusie</option>
<option value="http://www.sylviaday.com">Sylvia Day</option>
<option value="http://www.jacquied.com/">Jacquie D'Alessandro</option>
<option value="http://www.annawrites.com">Anna DeStefano</option>
<option value="http://www.theheathergraham.com">Shannon Drake</option>
<option value="http://www.gaelenfoley.com">Gaelen Foley</option>
<option value="http://www.doriegraham.com">Dorie Graham</option>
<option value="http://www.theheathergraham.com">Heather Graham</option>
<option value="http://www.kristinhardy.com">Kristin Hardy</option>
<option value="http://www.sandrahill.net">Sandra Hill</option>
<option value="http://www.eloisajames.com">Eloisa James</option>
<option value="http://www.sabrinajeffries.com">Sabrina Jeffries</option>
<option value="http://www.susanjohnsonauthor.com/index.html">Susan Johnson</option>
<option value="http://www.nicolejordanauthor.com/">Nicole Jordan</option>
<option value="http://www.brendajoyce.com">Brenda Joyce</option>
<option value="http://www.stephanielaurens.com">Stephanie Laurens</option>
<option value="http://www.joleigh.com">Jo Leigh</option>
<option value="http://www.julieleto.com">Julie Leto</option>
<option value="http://www.karenmoning.com/index2.html">Karen Marie Moning</option>
<option value="http://www.robinschone.com">Robin Schone</optoin>
<option value="http://www.juliaquinn.com">Julia Quinn</option>
</select>
<br>
<span id="textcontainer3" align="left" style="font:italic 12px verdana;">
</span>
</form>

<!--Drop down menu 4->
<form name="form4>
<select name="select4" size="1" style="color: #ffffff" style="background-color:#990000" onChange="displaydesc(document.form4.select4, thetext4, 'textcontainer4');jumptolink(document.form4.select4)">
<option value="0">Blogroll</option>
<option value="http://tristabane.blogspot.com">Trista Bane</option>
<option value="http://debbiebehrens.blogspot.com/">Debbie Behrens</option>
<option value="http://www.shelleybradley.com/blog/">Shelley Bradley</option>
<option value="http://tjbrown.blogspot.com/">TJ Brown</option>
<option value="http://womenoflivingwater.blogspot.com/">Corina Bowen</option>
<option value="http://charinamiranda.blogspot.com/">Char's Blog</option>
<option value="http://robinswritingworld.blogspot.com/">Robin Caroll</option>
<option value="http://chryscasey.blogspot.com/">Chrystal Casey</option>
<option value="http://www.sylviaday.com/blog/">Sylvia Day</option>
<option value="http://annadestefano.blogspot.com/">Anna DeStefano</option>
<option value="http://dianedishman.blogspot.com/">Diane Dishman</option>
<option value="http://thewritesnark.blogspot.com/">Rinda Elliot</option>
<option value="http://melissafrancis.blogspot.com/">Mel Francis</option>
<option value="http://www.bonnieferguson.com/blog/">Bonnie Ferguson</option>
<option value="http://heathersblethers.blogspot.com/">Heather Dawn Harper</option>
<option value="http://nienkehinton.blogspot.com/">Nienke Hinton</option>
<option value="http://cert-romantic.livejournal.com/">Amanda Jayde</option>
<option value="http://judsonknight.blogspot.com/">Judson Knight</option>
<option value="http://www.amandamccabe.blogspot.com/">Amanda McCabe</option>
<option value="http://grosvenorsquare.blogspot.com/">Melissa Marsh</option>
<option value="http://elvenvampires.blogspot.com/">Merleena's Blog</option>
<option value="http://www.patricemichelle.net/blog/2006/05/22/back-from-rt/">Patrice Michelle</option>
<option value="http://jillmonroe.blogspot.com/">Jill Monroe</option>
<option value="http://marniemyers.blogspot.com/">Marnie Myers</option>
<option value="http://alittlecheesewiththatwhine.blogspot.com/">Rene's Blog</option>
<option value="http://dishinthedirt.blogspot.com/">Betty Sanders</option>
<option value="http://justwritesara.blogspot.com/">Sara's Blog</option>
<option value="http://genashowalter.blogspot.com/">Gena Showalter</option>
<option value="http://marywritesromance.blogspot.com/">The Bandwagon</option>
<option value="http://www.cafepress.com/TheWriteSnark/">The Write Snark</option>
<option value="http://urbanfantasy.blogspot.com/">Rachel Vincent</option>
</select>
<br>
<span id="textcontainer4" align="left" style="font:italic 12px verdana;">
</span>
</form>

=======================================

var thetext3=new Array()
thetext3[0]="My favorite authors"
thetext3[1]="Author of Romantic Suspense"
thetext3[2]="Historical, Contemporary and Erotic Romance Author"
thetext3[3]="Harlequin Blaze"
thetext3[4]="Historical and Contemporary Romance"
thetext3[5]="Chick-lit"
thetext3[6]="Erotic Romance Author"
thetext3[7]="Historical and Contemporary Romance Author"
thetext3[8]="Harlequin SuperRomance"
thetext3[9]="Historical Romance"
thetext3[10]="Historical Romance"
thetext3[11]="Harlequin Blaze"
thetext3[12]="Paranormal Romance"
thetext3[13]="Harlequin Blaze"
thetext3[14]="Historical, Contemporary and Paranormal Romance"
thetext3[15]="Historical Romance"
thetext3[16]="Historical Romance"
thetext3[17]="Historical and Contemporary Erotic Romance"
thetext3[18]="Sensual Historical Romance"
thetext3[19]="Historical, Contemporary and Paranormal Romance"
thetext3[20]="Sensual Historical Romance"
thetext3[21]="Harlequin Blaze"
thetext3[22]="Harlequin Blaze"
thetext3[23]="Paranormal and Historical Romance"
thetext3[24]="Erotic Romance"
thetext3[25]="Historical Romance"

var thetext4=new Array()
thetext4[0]="Blogs I read"
thetext4[1]="Trista Bane's Web Journal"
thetext4[2]="Deb's Blog"
thetext4[3]="My Wicked Muse"
thetext4[4]="Martinis, Motherhood and Mayhem!"
thetext4[5]="Women of Living Water"
thetext4[6]="The Road to Slimville!"
thetext4[7]="Robin's Writing World"
thetext4[8]="The Unending Scribbler"
thetext4[9]="Sylvia Day's Web Journal"
thetext4[10]="Anna DeStefano's Web Journal"
thetext4[11]="A writer's blog about family & friends, life on a cattle ranch, and the writing life"
thetext4[12]="Rinda Elliot's, The Write Snark!"
thetext4[13]="Mel-O-Drama, *****in' Fiction!"
thetext4[14]="Bonnie Fergusion, Passion Through the ages!"
thetext4[15]="Heather's Blethers"
thetext4[16]="The Writing Life"
thetext4[17]="The Quill and Parchment, Musings of an Aspiring Author"
thetext4[18]="Judson Knight's Epic World"
thetext4[19]="Books, self-centered musings, and chocolatinis!"
thetext4[20]="Grosvenor Square - Musings on the Writing Life by Melissa Marsh"
thetext4[21]="Elvin Vampires"
thetext4[22]="Patrice's Blog"
thetext4[23]="Off the Keyboard!"
thetext4[24]="Life on Marnie Lane, Texas"
thetext4[25]="A Little Cheese with that Whine!"
thetext4[26]="Dishin' the Dirt with my Friends!"
thetext4[27]="Moments of Clarity"
thetext4[28]="Gena Showalter's Weblog"
thetext4[29]="The Bandwagon"
thetext4[30]="CafePress, The Write Snark!"
thetext4[31]="Rachel Vincent's Weblog"
thetext4[32]=""

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

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

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

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

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

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

//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')
displaydesc(document.form3.select3, thetext3, 'textcontainer3')
displaydesc(document.form4.select4, thetext4, 'textcontainer4')

</script>

[jscheuer1]

Sloppy coding, this worked:

http://home.comcast.net/~jscheuer1/side/dropdown_h.htm

Use your browser's 'view source' to see the code. You had malformed comments (also for number 4):

<!--Drop down menu 3->

should be:

<!-- Drop down menu 3 -->

Missing quote here:

 . . . ect3, thetext3, 'textcontainer3');ju . . .

and here:

<form name="form4">

[Charina]

I guess no one can answer my question. I've been tooling around with the menu trying to see where I went wrong. Any help would be greatly appreciated.

Charina

[jscheuer1]

I guess no one can answer my question. I've been tooling around with the menu trying to see where I went wrong. Any help would be greatly appreciated.

Charina

Did you read my post (#4 in this thread) where I told you what the errors were in your code from your post (#3 in this thread)??? Did you also look at the demo I made for you using your corrected code:

http://home.comcast.net/~jscheuer1/side/dropdown_h.htm

??? Did you examine its source code using your browser's 'view source' and compare it to yours???

How much more help do you need?