JavaScript - How To Add 3rd Level To Vertical Menu

Hi All,

My apologies if this is answered in a previous post but my searches didn't turn up a solution.

I need an expanding, vertical menu, virtually identical to:

http://www.dynamicdrive.com/dynamici...enu-glossy.htm

but with one change.

The menu subheaders, ie, "CSS Examples, CSS Drives" are currently just text and their background is defined in the CSS. I need to make these menu subheaders rollover graphics instead of text.

It is easy to replace the submenu items themselves with rollover graphics instead of text, but the menu subheaders have defeated me.

Is there a cunning solution to this?

Regards

Gary

If you look at this test page, you see a vertical image menu. This menu is originally from http://www.byscripts.info/scripts/ja...accordion-menu (example 3)

But... how can you get it to 100% heigh?
Please, look at the source code

Thanks

Hi... I did the Cut & Paste CSS Vertical List Menu, but I have an issue with submenus... Appear behind other divs.

I attach a print screen. I include inside a div. Any idea?

Code:

<div id="sidebar1">
      
        <ul id="verticalmenu" class="glossymenu">
        <li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
        <li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
        <li><a href="#">References</a>
            <ul>
            <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
            </ul>
        </li>
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
        <li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
        <li><a href="#" >Helpful Resources</a>
            <ul>
            <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
            <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
            <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
            </ul>
        </li>
        </ul>

      </div>

I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates.

The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps.

Here is the entire Javascript code that goes into the head tag:
Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -


var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118

var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1

var menuismoving="no"

function gotourl(thisurl) {
    alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}

function inite() {
	if (document.layers) {
        document.About.left=menuleft
        document.News.left=menuleft
        document.Profiles.left=menuleft 
        document.Issues.left=menuleft
        document.Extras.left=menuleft
        document.Links.left=menuleft
        document.Forum.left=menuleft
        document.About.top=Abouttop
        document.News.top=Newstop
        document.Profiles.top=Profilestop
        document.Issues.top=Issuestop
        document.Extras.top=Extrastop
        document.Links.top=Linkstop
        document.Forum.top=Forumtop
	}	
	if (document.all) {
        document.all.About.style.posLeft=menuleft
        document.all.News.style.posLeft=menuleft
        document.all.Profiles.style.posLeft=menuleft
        document.all.Issues.style.posLeft=menuleft
        document.all.Extras.style.posLeft=menuleft
        document.all.Links.style.posLeft=menuleft
        document.all.Forum.style.posLeft=menuleft
        document.all.About.style.posTop=Abouttop
        document.all.News.style.posTop=Newstop
        document.all.Profiles.style.posTop=Profilestop
        document.all.Issues.style.posTop=Issuestop
        document.all.Extras.style.posTop=Extrastop
        document.all.Links.style.posTop=Linkstop
        document.all.Forum.style.posTop=Forumtop
	}
}

function getmenuname(clickedmenu) {
    if (menuismoving=="no") {
	    if (document.layers) {
            thismenu=eval("document."+clickedmenu)
	    }	
	    if (document.all) {
            thismenu=eval("document.all."+clickedmenu+".style")
	    }
        step=pace
        checkdirection()
	    movemenu()
    }
}

function checkdirection() {
	if (document.layers) {    
        if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}     
	}	
	if (document.all) {
        if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}   
	}
    menuismoving="yes"
}

function movemenu() {
	if (document.layers) {
        if (step>=0) {
            thismenu.left+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
	}	   
	if (document.all) {
        if (step>=0) {
            thismenu.posLeft+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
    }
}
// - End of JavaScript - -->
</SCRIPT>

Code:

This is the CSS code that also goes into the head tag:

<style type="text/css">
	#About {position:absolute;left:-1000px;}
    #News {position:absolute;left:-1000px;}
    #Profiles {position:absolute;left:-1000px;}
    #Issues {position:absolute;left:-1000px;}
    #Extras {position:absolute;left:-1000px;}
    #Links {position:absolute;left:-1000px;}
    #Forum {position:absolute;left:-1000px;}
	.baseline {
		position:absolute;
		left:250px;
		top:100px;
    	font-family:Arial;
    	font-size:9pt;
		color:000000;
	}
</STYLE>

And I'm not sure if this is needed or not, but just in case, here is everything between the body tags
Code:

<body onLoad="inite()" topmargin="0" leftmargin="0"> 

<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>

<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>

<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>

<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>

<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>

<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>

<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg"> 
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>

And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol.
http://www.newwarriors.net

I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much!

Resolved.

Is there a way add another dropdown form to this script?

http://javascript.internet.com/navig...-comboxes.html

Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made...

Thanks in advance...

Hey everyone, I need some help with a function. I'm using ajax to grab a response from a PHP page, on success, the ajax sets a variable. After the line that calls the ajax function is the line the returns the variable (a global variable). Problem is, because the variable is returned right after the ajax function is fired, it doesn't give the ajax enough time to set the variable. The work around I've thought about would be using the ajax function as a variable, and returning that variable in the initial return line. Could anyone either help me with a better solution, or tell me what I'm doing wrong? Here's some code for reference:

The function that will return the response I'm trying to collect:
Code:

function lt_ajaxGet(hash) {
	var params = "hash=" + escape(encodeURI(hash));
	makePOSTRequest('hash.php?get', params);
	return ajax_response;
}

The ajax code:
Code:

if(http_request.status == 200){
	ajax_response = http_request.responseText;
}

Hi There.

I've been reading this forum for quite sometime, but today is my first post, hope you guys can help.

Here is how the code works: (its like a phone directory)

-User first selects the dept.
-Once selected, a second drop down populates with the names of each person in that department.
-I want the contact info to show on the page once they select this last step.

I need for when the user selects this second options for a link to open inside a iFrame inside of the same html page.

I uploaded the file here for you to see: www.pioneer-energy.us/tf2/contact-us.html

Here is the code for the HTML doc:

Code:

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="fillCategory();">

<FORM name="drop_list" action="yourpage.php" method="POST" >
		
<SELECT  NAME="Department" onChange="SelectSubCat();" >
<Option value="">Select Department</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>

Here is the .js file code



Code:

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Department, "Executive-Management", "Executive Management");
addOption(document.drop_list.Department, "Marketing", "Marketing", "");
addOption(document.drop_list.Department, "Annuities", "Annuities", "");
addOption(document.drop_list.Department, "Underwriting/Case Management", "Underwriting/Case Management", "");
addOption(document.drop_list.Department, "Human Resources", "Human Resources", "");
addOption(document.drop_list.Department, "Commissions", "Commissions", "");
addOption(document.drop_list.Department, "Policy Owner Services", "Policy Owner Services", "");
addOption(document.drop_list.Department, "Information Technology", "Information Technology", "");
addOption(document.drop_list.Department, "APS", "APS", "");
}



function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Department.value == 'Executive-Management'){
addOption(document.drop_list.SubCat,"MartyGreenberg", "Marty Greenberg - President");
addOption(document.drop_list.SubCat,"LisaGreenberg ", "Lisa Greenberg - Vice President");
addOption(document.drop_list.SubCat,"CraigBrown", "Craig Brown - CFO");
addOption(document.drop_list.SubCat,"RitaBogan", "Rita Bogan - Executive Secretary & Case Management");
addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
}
if(document.drop_list.Department.value == 'Marketing'){
addOption(document.drop_list.SubCat,"RonBielefelt", "Ron Bielefelt - Chief Marketing Officer");
addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
addOption(document.drop_list.SubCat,"MarkRBugli", "Mark R. Bugli - CLU, ChFC ");
addOption(document.drop_list.SubCat,"HowardMandel", "Howard Mandel - Director of Business Development");
addOption(document.drop_list.SubCat,"DeborahSanchez", "Deborah Sanchez - Brokerage Supervisor ");
addOption(document.drop_list.SubCat,"SylviaMariscal", "Sylvia Mariscal - Life Settlements");
addOption(document.drop_list.SubCat,"PeterMilanez", "Peter Milanez - Brokerage Manager");
addOption(document.drop_list.SubCat,"JosephTanner", "Joseph Tanner - Brokerage Manager Assistant", "");
}
if(document.drop_list.Department.value == 'Annuities'){
addOption(document.drop_list.SubCat,"SethMoses", "Seth Moses - Director of Annuities");
addOption(document.drop_list.SubCat,"SteveAvila", "Steve Avila - Assistant to Seth Moses");
}
if(document.drop_list.Department.value == 'Underwriting/Case Management'){
addOption(document.drop_list.SubCat,"DianaGreenberg", "Diana Greenberg - Underwriting Manager");
addOption(document.drop_list.SubCat,"KimberlyFleming", "Kimberly Fleming - Case Manager ");
addOption(document.drop_list.SubCat,"LarissaBurton", "Larissa Burton - Case Manager Assistant to Kimberly Fleming");
addOption(document.drop_list.SubCat,"MariaAntebi", "Maria Antebi - Case Manager");
addOption(document.drop_list.SubCat,"LilianaGalvan", "Liliana Galvan - Case Manager");
addOption(document.drop_list.SubCat,"KimberlyKoontz", "Kimberly Koontz  - Case Manager Assistant to Liliana Galvan");
addOption(document.drop_list.SubCat,"ChastaSpikes", "Chasta Spikes  - Case Manager");
addOption(document.drop_list.SubCat,"SylviaMarsicalShank", "Sylvia Marsical-Shank - Case Manager");
addOption(document.drop_list.SubCat,"TriciaRomain  ", "Tricia Romain - Case Manager");
addOption(document.drop_list.SubCat,"BetoRuiz", "Beto Ruiz  - Case Manager");
addOption(document.drop_list.SubCat,"DavidGarcia", "David Garcia - Case Manager Assistant");
}
if(document.drop_list.Department.value == 'Human Resources'){
addOption(document.drop_list.SubCat,"MarieOkamura", "Marie Okamura - Human Resources Director");
}
if(document.drop_list.Department.value == 'Commissions'){
addOption(document.drop_list.SubCat,"WalterHelbig", "Walter Helbig, FLMI - Licensing");
addOption(document.drop_list.SubCat,"KenFong", "Ken Fong - Licensing");
addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Commissions");
}
if(document.drop_list.Department.value == 'Licensing'){
addOption(document.drop_list.SubCat,"TessSlezak ", "Tess Slezak - Licensing");
addOption(document.drop_list.SubCat,"ArleneAuerhan ", "ArleneAuerhan  - Licensing");
addOption(document.drop_list.SubCat,"JimTigrak", "Jim Tigrak - Forms & Supplies");
}
if(document.drop_list.Department.value == 'Policy Owner Services'){
addOption(document.drop_list.SubCat,"LanTran", "Lan Tran - Policy Services");
addOption(document.drop_list.SubCat,"GianSanchez ", "Gian Sanchez - Receptionist");
addOption(document.drop_list.SubCat,"ArmonTodd ", "Armon Todd - Office Support");
}
if(document.drop_list.Department.value == 'Information Technology'){
addOption(document.drop_list.SubCat,"HenryCholakyan ", "Henry Cholakyan - IT Director");
}
if(document.drop_list.Department.value == 'APS'){
addOption(document.drop_list.SubCat,"CarmenAllen  ", "Carmen Allen - APS Supervisor");
}
}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

Thanks for any help in advanced!

I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear...

Ex: If I had three properties in Spain,

-----------------------------------------------------------------------------------------------------------
| -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- |
| -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- |
| -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- |
| -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- |
-----------------------------------------------------------------------------------------------------------

it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella

Can anyone please help? I need it very much...

Thanks in advance!

Hello, this is my very first post, and I hope to get some help, .

Please dont take this as a code dump. The following script is a working script,, Which correctly displays a 2 level chain-linked select box

My problem is I need to make a third box which option VALUE will be the same as the option CLASS of its parent item in the second box.


Any pointers?


PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
        <title>Unobtrusive dynamic select boxes | Single dynamic selectbox example</title>     
        <script type="text/javascript"> 
         
         
         
        function dynamicSelect(id1, id2) { 
    // Feature test to see if there is enough W3C DOM support 
    if (document.getElementById && document.getElementsByTagName) { 
        // Obtain references to both select boxes 
        var sel1 = document.getElementById(id1); 
        var sel2 = document.getElementById(id2); 
        // Clone the dynamic select box 
        var clone = sel2.cloneNode(true); 
        // Obtain references to all cloned options 
        var clonedOptions = clone.getElementsByTagName("option"); 
        // Onload init: call a generic function to display the related options in the dynamic select box 
        refreshDynamicSelectOptions(sel1, sel2, clonedOptions); 
        // Onchange of the main select box: call a generic function to display the related options in the dynamic select box 
        sel1.onchange = function() { 
            refreshDynamicSelectOptions(sel1, sel2, clonedOptions); 
        }; 
    } 
} 
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { 
    // Delete all options of the dynamic select box 
    while (sel2.options.length) { 
        sel2.remove(0); 
    } 
    // Create regular expression objects for "select" and the value of the selected option of the main select box as class names 
    var pattern1 = /( |^)(select)( |$)/; 
    var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); 
    // Iterate through all cloned options 
    for (var i = 0; i < clonedOptions.length; i++) { 
        // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box 
        if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) { 
            // Clone the option from the hidden option pool and append it to the dynamic select box 
            sel2.appendChild(clonedOptions[i].cloneNode(true)); 
        } 
    } 
} 

         
         
        </script> 
        <script type="text/javascript"> 
        window.onload = function() { 
            dynamicSelect("pda-brand", "pda-type"); 
        } 
        </script> 
    </head> 
    <body> 
        <form action="#"> 
            <div> 
                <select id="pda-brand"> 
                    <option value="select">Select PDA brand...</option> 
                    <option value="dell">Dell</option> 
                    <option value="hp">HP</option> 
                    <option value="palmone">PalmOne</option> 
                </select> 
                <select id="pda-type"> 
                    <option class="select" value="select">Select PDA type...</option> 
                    <option class="dell" value="aximx30">Axim X30</option> 
                    <option class="dell" value="aximx50">Axim X50</option> 
                    <option class="hp" value="ipaqhx2750">iPAQ hx2750</option> 
                    <option class="hp" value="ipaqrx3715">iPAQ rx3715</option> 
                    <option class="palmone" value="tungstene2">Tungsten E2</option> 
                    <option class="palmone" value="zire72">Zire 72</option> 
                </select> 
                 
              <select id="pda-amount"> 
                    <option class="select" value="select">Select PDA Amount...</option> 

                    <option class="aximx30" value="1">1</option> 
                    <option class="aximx30" value="2">2</option> 

                    <option class="aximx50" value="1">1</option> 
                    <option class="aximx50" value="2">2</option> 
                    <option class="aximx50" value="3">3</option> 
                    <option class="aximx50" value="4">4</option> 

                    <option class="ipaqhx2750" value="1">1</option> 
                    <option class="ipaqhx2750" value="2">2</option>
                    <option class="ipaqhx2750" value="3">3</option> 
                    <option class="ipaqhx2750" value="4">4</option>
                    <option class="ipaqhx2750" value="5">5</option>
 
                    <option class="ipaqrx3715" value="1">1</option> 
                    <option class="ipaqrx3715" value="2">2</option> 

                    <option class="tungstene2" value="1">1</option> 

                    <option class="zire72" value="1">1</option> 
                    <option class="zire72" value="2">2</option> 
                    <option class="zire72" value="3">3</option> 


                </select> 
                 
                 
                 
                 
            </div> 
        </form> 
    </body> 
</html> 

Ok so i am trying to make 3 dropdowns based off a mysql table. and the 3 dropdowns need to be based off of the previous dropdown.

i.e Source, School, Sub.

Select Source, and the schools in dropdown 2 are based off of the source they selected, and when they select a school, all the sub cats for that school are in the sub category dropdown.

It seems like a simple concept, but i've google'd EVERYWHERE and notihng. I have the 3 dropdown's pulling from my database perfectly. i just cannot base the next dropdown on the previous selection! I know nothing of javascript..im a front end designer with little php/mysql. I've read that Ajax is the way to go, so here i am !


any tutotials, links or sample script layouts i can use would be amazing!
Thank you!

jt

hey

I have a page in which I already have a 3 level combox that works fine. I want to add to that page another combobox of 2 level.
When I tried to do it I find out that they control of each other. I tried changing the variables names. (changing "x" into "w" in the second combobox)
Well that worked. Can you please help me figure it out?

here is the end of the first form:


var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}

function redirect2(z){
parent.mainframe.location=temp1[z].value;

and here is the end of the second combobox:

var temp=document.doublecombo.stage2A

function redirect(w){
for (n=temp.options.length-1;n>0;n--)
temp.options[n]=null
for (k=0;k<groupa[w].length;k++){
temp.options[k]=new Option(groupa[w][k].text,groupa[w][k].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex1].value
}



Thanks
Elad

Hello,

I have a 2 level combo box that are dependent on each other and what I want to happen when the "submit" button is selected is for an html text answer to be displayed on the same page below the combo boxes based off of what was selected in the second combo box. I've tried using hide/show functions with JavaScript but couldn't figure out how to link the 2 scripts together. What I have is as follows:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">

// first combo box

	data_1_1 = new Option("School 1", "$");
	data_1_2 = new Option("School 2", "$$");

// second combo box

	data_2_1 = new Option("21", "--");
	data_2_2 = new Option("22", "--");
	data_2_3 = new Option("23", "--");
	data_2_4 = new Option("24", "--");
	data_2_5 = new Option("25", "--");

// third combo box

	
// other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
	numb = currentbox.id.split("_");
	currentbox = numb[1];

    i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);
	     // I empty all options except the first one (it isn't allowed)
	     for (m=son.options.length-1;m>0;m--) son.options[m]=null;
	     // I reset the first option
	     son.options[0]=new Option(displaywhenempty,valuewhenempty)
	     i=i+1
    }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }


// filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

       // if there are no options, I empty the first option of the "son" combo
	   // otherwise I put "-select-" in it

	   	  if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
	   	      if (eval("typeof("+stringa+"1)=='undefined'"))
	   	         eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
	   	      else
	             eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
	      else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
	      i=i+1
	   }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}

//-->
</script>

<body>

<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">Delaware</option>
	<option value="value3">Pennsylvania</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<input type="button" name="test" value="Submit"
onclick="go()"><BR>
<BR>
</form>


    <body>
</html>

If someone can either assist with this or point me in the right direction of how to do this it would be a great help.

Thanks in advance,

the code below was got from <http://www.javascriptkit.com/javatutors/selectcontent2.shtml>

I was following to tutorial to learn how to create multi-level select list in javascript.

i have gone through it but wanted to print the individual selected item in each option, i could not. the first worked well for be because the selected options are manually typed, but the last option became difficult because they are dynamically loaded.

Please can anyone guild me on how to print the selected option of the second field?


<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>Select A City</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>

<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>

<script type="text/javascript">

var countrieslist=document.classic.countries
var citieslist=document.classic.cities

var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]

function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}

</script>

Can anyone spot how to make this drop-in popup do so at slightly higher horizontal level than currently?

I've played around with it quite a bit, but no luck.

Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript1.2">

// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=initbox

</script>
</head>

<body>

<div id="dropin" style="position: absolute; visibility: hidden; left: 200px; top: 100px; width: 500px; height: 300px; background-color: #F5F5F5">
  <div align="right">
    <a href="#" onClick="dismissbox();return false">[Close Box] </a>
  </div>
  <p>SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML
</div>

</body>

</html>