Learn VBA & Macros in 1 Week!

JavaScript - How To Integrate Drop Down Combo Box Menu For Pricing With Multiple Currencies?

Full Excel VBA Course - Beginner to Expert

How To Integrate Drop Down Combo Box Menu For Pricing With Multiple Currencies?	View Content

Hello,
i want to integrate dropdown combobox menu on my website for pricing, i want the same like it is on the following link:
Web Hosting - Shared cPanel Web Hosting
and on this website there is no choose currency option, but i have set on my website on the corner of the top side.
how can i do this?

Regards,
Alex C

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Multiple Combo Boxes - Show All Records If Sub-combo Isn't Used

Drop Down Menu Multiple Levels

Using Drop Down Menu To Change Multiple Images

Modification Of Multiple Dynamic Combo Boxes

How To Turn My Drop-down Menu, Into A Double Drop-down Menu?

Using Combo Box To Create Second Combo Box And Add Second Selection To Session

"multiple Dynamic Combo Boxes" Configuration

Dynamically Change Currencies With Dropdown

How To Make A Drop Down Menu For A Menu

Multiple Drag And Drop

Multiple Variables In A Drop Down List

Append Variable To Url In Multiple Drop Down Page.

Drop Down Menu Help

Need Help With Drop-down Menu

Drop Down Menu Help

Learn VBA & Macros for Excel in 1 Week!

Multiple Combo Boxes - Show All Records If Sub-combo Isn't Used

Similar Tutorials

Hello

I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml)

I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense.

The code is as follows:

Code:

// first combo box

	data_1 = new Option("Douglas - DIS", "$");
	data_2 = new Option("Douglas - COE", "$$");
	data_3 = new Option("Peel - DIS", "$$$");
	data_4 = new Option("Peel - COE", "$$$$");
	data_5 = new Option("Ramsey - DIS", "$$$$$");
	data_6 = new Option("Ramsey - COE", "$$$$$$");
	data_7 = new Option("Castletown - DIS", "$$$$$$$");
	data_8 = new Option("Castletown - COE", "$$$$$$$$");		
// second combo box

	data_1_1 = new Option("Registry Office Douglas", "-");
	data_1_2 = new Option("Broadway Baptist Church Douglas", "-");
	data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-");
	data_2_1 = new Option("St Thomas's Church", "--");
	data_2_2 = new Option("St Barnabas Church", "--");
	data_2_3 = new Option("St George's Church", "--");

The HTML code is as follows:

Code:

<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">	
			
			<option value="">Select a Register...</option>
			<option value="Douglas - DIS">Douglas - DIS</option>
			<option value="Douglas - COE">Douglas - COE</option>
			<option value="Peel - DIS">Peel - DIS</option>
			<option value="Peel - COE">Peel - COE</option>
			<option value="Ramsey - DIS">Ramsey - DIS</option>
			<option value="Ramsey - COE">Ramsey - COE</option>
			<option value="Castletown - DIS">Castletown - DIS</option>
			<option value="Castletown - COE">Castletown - COE</option>
			

			</select>
<BR><BR>
			<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
			<option value="">Select a venue...</option>
			
			</select>

the link for the actual site is

http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages

If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there.

I'm not sure where I've gone wrong - I'm completely new to Javascript.

Any suggestions welcomed.

regards

Pendle

Drop Down Menu Multiple Levels

Similar Tutorials

Hi,

This code works as it should, but I want to enhance it so that it does a search by category within the Regions/Provinces selected. But I'm not an expert with Javascript, actually the complete reverse. This if for a classified ads website, so the categories are like cars, homes, etc

Code:

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
<script language="JavaScript">
function loadPage(list) { location.href=list.options[list.selectedIndex].value }
</script>
  </head>
  <body>

<table align="center">
<tr>
<td>
<form>
<div align="center">
Search by
<select name="file" size="1"
  onchange="loadPage(this.form.elements[0])"
  target="_parent._top"
  onmouseclick="this.focus()">

  <option value select="selected">Regions</option>
  <option value="http://www.apple.com">Region 1</option>
  <option value="http://www.apple.com">Region 2</option>
  <option value="http://www.apple.com">Region 3</option>

</select>
</form>
</td>
<td>
<form>
or
<select name="file" size="1"
  onchange="loadPage(this.form.elements[0])"
  target="_parent._top"
  onmouseclick="this.focus()">

  <option value select="selected">Provinces</option>
  <option value="http://www.apple.com">Province 1</option>
  <option value="http://www.apple.com">Province 2</option>
  <option value="http://www.apple.com">Province 3</option>

</select>
</div></form>
</td></tr></table>
  </body>
</html>

Any help would be appreciated. Or any improvements would also be appreciated. Also, any help in converting the table to CSS would be appreciated.

Using Drop Down Menu To Change Multiple Images

Similar Tutorials

Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image...

Code:

   <script type="text/javascript"> 
function changeWalls(what, whatimg) 
{ 
if(what != "none")
{
document.images[whatimg].src = what;
}
} 
      </script>
      <select name="Walls" onchange="changeWalls(this.value,'walls')">
        <option value="images/white.gif" selected="selected">Please Select a Colour</option>
        <option value="images/WALLCC.png">Classic Cream</option>
        <option value="images/WALLSG.png">Shale Grey</option>
        <option value="images/WALLDO.png">Deep Ocean</option>
        <option value="images/WALLSM.png">Surfmist</option>
      </select>

then the images i want are multiples so i want to change 2 of these
Code:

<img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" />

Modification Of Multiple Dynamic Combo Boxes

Similar Tutorials

Hi all, please help...
There is a small, but very usability script - Multiple Dynamic Combo Boxes by Elviro Mirko (http://www.javascriptkit.com/script/...plecombo.shtml). Since there are many versions of this script. One of them, which I did.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box //
data_1 = new Option("All Models", "#");
data_2 = new Option("Model 1", "#");
data_3 = new Option("Model 2", "#");


// second combo box //
//All
data_1_1 = new Option("All Types", "#");
data_1_2 = new Option("Type 1", "#");
data_1_3 = new Option("Type 2", "#");
//Model 1
data_2_1 = new Option("All Types", "#");
data_2_2 = new Option("Type 1", "#");
data_2_3 = new Option("Type 2", "#");
//Model 2
data_3_1 = new Option("All Types", "#");
data_3_2 = new Option("Type 1", "#");
data_3_3 = new Option("Type 2", "#");


// third combo box //
//All Models
data_1_1_1 = new Option("All Sizes", "#");
data_1_1_2 = new Option("Size 1", "#");
data_1_1_3 = new Option("Size 2", "#");

data_1_2_1 = new Option("All Sizes", "#");
data_1_2_2 = new Option("Size 1", "#");
data_1_2_3 = new Option("Size 2", "#");

data_1_3_1 = new Option("All Sizes", "#");
data_1_3_2 = new Option("Size 1", "#");
data_1_3_3 = new Option("Size 2", "#");

//Model 1
data_2_1_1 = new Option("All Sizes", "#");
data_2_1_2 = new Option("Size 1", "#");
data_2_1_3 = new Option("Size 2", "#");

data_2_2_1 = new Option("All Sizes", "#");
data_2_2_2 = new Option("Size 1", "#");
data_2_2_3 = new Option("Size 2", "#");

data_2_3_1 = new Option("All Sizes", "#");
data_2_3_2 = new Option("Size 1", "#");
data_2_3_3 = new Option("Size 2", "#");

//Model 2
data_3_1_1 = new Option("All Sizes", "#");
data_3_1_2 = new Option("Size 1", "#");
data_3_1_3 = new Option("Size 2", "#");

data_3_2_1 = new Option("All Sizes", "#");
data_3_2_2 = new Option("Size 1", "#");
data_3_2_3 = new Option("Size 2", "#");

data_3_3_1 = new Option("All Sizes", "#");
data_3_3_2 = new Option("Size 1", "#");
data_3_3_3 = new Option("Size 2", "#");


// fourth combo box //
//All Models
data_1_1_1_1 = new Option("All color","http://special.link");
data_1_1_1_2 = new Option("Color 1","http://special.link");
data_1_1_1_3 = new Option("Color 2","http://special.link");

data_1_1_2_1 = new Option("All color","http://special.link");
data_1_1_2_2 = new Option("Color 1","http://special.link");
data_1_1_2_3 = new Option("Color 2","http://special.link");

data_1_1_3_1 = new Option("All color","http://special.link");
data_1_1_3_2 = new Option("Color 1","http://special.link");
data_1_1_3_3 = new Option("Color 2","http://special.link");

data_1_2_1_1 = new Option("All color","http://special.link");
data_1_2_1_2 = new Option("Color 1","http://special.link");
data_1_2_1_3 = new Option("Color 2","http://special.link");

data_1_2_2_1 = new Option("All color","http://special.link");
data_1_2_2_2 = new Option("Color 1","http://special.link");
data_1_2_2_3 = new Option("Color 2","http://special.link");

data_1_2_3_1 = new Option("All color","http://special.link");
data_1_2_3_2 = new Option("Color 1","http://special.link");
data_1_2_3_3 = new Option("Color 2","http://special.link");

data_1_3_1_1 = new Option("All color","http://special.link");
data_1_3_1_2 = new Option("Color 1","http://special.link");
data_1_3_1_3 = new Option("Color 2","http://special.link");

data_1_3_2_1 = new Option("All color","http://special.link");
data_1_3_2_2 = new Option("Color 1","http://special.link");
data_1_3_2_3 = new Option("Color 2","http://special.link");

data_1_3_3_1 = new Option("All color","http://special.link");
data_1_3_3_2 = new Option("Color 1","http://special.link");
data_1_3_3_3 = new Option("Color 2","http://special.link");

//All Model 1
data_2_1_1_1 = new Option("All color","http://special.link");
data_2_1_1_2 = new Option("Color 1","http://special.link");
data_2_1_1_3 = new Option("Color 2","http://special.link");

data_2_1_2_1 = new Option("All color","http://special.link");
data_2_1_2_2 = new Option("Color 1","http://special.link");
data_2_1_2_3 = new Option("Color 2","http://special.link");

data_2_1_3_1 = new Option("All color","http://special.link");
data_2_1_3_2 = new Option("Color 1","http://special.link");
data_2_1_3_3 = new Option("Color 2","http://special.link");

data_2_2_1_1 = new Option("All color","http://special.link");
data_2_2_1_2 = new Option("Color 1","http://special.link");
data_2_2_1_3 = new Option("Color 2","http://special.link");

data_2_2_2_1 = new Option("All color","http://special.link");
data_2_2_2_2 = new Option("Color 1","http://special.link");
data_2_2_2_3 = new Option("Color 2","http://special.link");

data_2_2_3_1 = new Option("All color","http://special.link");
data_2_2_3_2 = new Option("Color 1","http://special.link");
data_2_2_3_3 = new Option("Color 2","http://special.link");

data_2_3_1_1 = new Option("All color","http://special.link");
data_2_3_1_2 = new Option("Color 1","http://special.link");
data_2_3_1_3 = new Option("Color 2","http://special.link");

data_2_3_2_1 = new Option("All color","http://special.link");
data_2_3_2_2 = new Option("Color 1","http://special.link");
data_2_3_2_3 = new Option("Color 2","http://special.link");

data_2_3_3_1 = new Option("All color","http://special.link");
data_2_3_3_2 = new Option("Color 1","http://special.link");
data_2_3_3_3 = new Option("Color 2","http://special.link");

//All Model 2
data_3_1_1_1 = new Option("All color","http://special.link");
data_3_1_1_2 = new Option("Color 1","http://special.link");
data_3_1_1_3 = new Option("Color 2","http://special.link");

data_3_1_2_1 = new Option("All color","http://special.link");
data_3_1_2_2 = new Option("Color 1","http://special.link");
data_3_1_2_3 = new Option("Color 2","http://special.link");

data_3_1_3_1 = new Option("All color","http://special.link");
data_3_1_3_2 = new Option("Color 1","http://special.link");
data_3_1_3_3 = new Option("Color 2","http://special.link");

data_3_2_1_1 = new Option("All color","http://special.link");
data_3_2_1_2 = new Option("Color 1","http://special.link");
data_3_2_1_3 = new Option("Color 2","http://special.link");

data_3_2_2_1 = new Option("All color","http://special.link");
data_3_2_2_2 = new Option("Color 1","http://special.link");
data_3_2_2_3 = new Option("Color 2","http://special.link");

data_3_2_3_1 = new Option("All color","http://special.link");
data_3_2_3_2 = new Option("Color 1","http://special.link");
data_3_2_3_3 = new Option("Color 2","http://special.link");

data_3_3_1_1 = new Option("All color","http://special.link");
data_3_3_1_2 = new Option("Color 1","http://special.link");
data_3_3_1_3 = new Option("Color 2","http://special.link");

data_3_3_2_1 = new Option("All color","http://special.link");
data_3_3_2_2 = new Option("Color 1","http://special.link");
data_3_3_2_3 = new Option("Color 2","http://special.link");

data_3_3_3_1 = new Option("All color","http://special.link");
data_3_3_3_2 = new Option("Color 1","http://special.link");
data_3_3_3_3 = new Option("Color 2","http://special.link");


// 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 (document.getElementById("combo_"+i)) {
		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++;
	}


	// 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 (document.getElementById("combo_"+i)) {
		stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
		if (i==currentbox) break;
		i++;
	}


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

	following=parseInt(currentbox)+1;

	if (document.getElementById("combo_"+following)) {
		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'"))
					son.options[0]=new Option(displaywhenempty,valuewhenempty);
				else
					son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
			else
				son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
			i++;
		}
		//son.focus()
		i=1;
		combostatus='';
		cstatus=stringa.split("_");
		while (cstatus[i]) {
			combostatus=combostatus+cstatus[i];
			i++;
		}
		return combostatus;
	}
}


function go(elementName){
	var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
	if(newUrl.indexOf("http://")>=0){//rudamentary url checker! So don't go to a blank page if select box not populated.
		location.href=newUrl;
	}
}
//-->
</script>
</head>
<body>

<form>
Model:
<br />
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">All Models</option>
<option value="value3">Model 1</option>
<option value="value4">Model 2</option>
</select>
<br />
Type:
<br />
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Size:
<br />
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<br />
Color:
<br />
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option> 
<br />
<input type="button" value="Go" onclick="go('combo3')">
<!-- could be changed for onchange event handler on select box -->

</select>

</form>

<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>
</body>
</html>

But I need to when you first start the script immediately showed the first value and its associated down decaying values without - select -

immediately show combo first values

All Models
All Types
All Sizes
All Сolor

(and after next for various behaviors the user's manipulation choice)

**Or are there any other JS solutions that satisfy my request

I would be grateful for any aid....

How To Turn My Drop-down Menu, Into A Double Drop-down Menu?

Similar Tutorials

I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it...

I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded

Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same....

My live demo is here!

Thank you for any help and/or advice in advance,
Best Regards,
Tim

Pricing Script

Similar Tutorials

Using Combo Box To Create Second Combo Box And Add Second Selection To Session

Similar Tutorials

Hi Everybody

This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great.

What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine.

At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form.

I am trying to do it this way

DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email

Thanks in advance for your help

I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form)

I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail.

I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant

<html>
<head>

<script type="text/javascript">

var this1;

window.onload = function() {
if (!document.all) document.captureEvents(Event.CHANGE);
document.getElementById('myddl').onchange = readDDL1; }

function readDDL1() {
var ddlobj = document.getElementById('myddl');
var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value;
if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text;
doDDL2(currentSelection);
}

function doDDL2(ddl1Selection) {

var existingDDL2;
if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2);

var ddl2Options;
switch (ddl1Selection) {
case "Western Australia":
ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;
case "Queensland":
ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break;
}

if (typeof ddl2Options == "object") {
ddl2 = document.createElement('select');

ddl2.id = "myddl2";
var forVar;
for (forVar in ddl2Options) {
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode(ddl2Options[forVar]));
ddl2.appendChild(newOption);

}
document.body.appendChild(ddl2);

}

document.testform.this1.value = ((ddl2Options[forVar]));

}

function checkFrequency() {
return ShowResults();

}

function validate(){
var digits="0123456789"
var temp

if (document.testform.location.selectedIndex == 0) {
alert("Please Select a State");
return false
}

if (document.testform.location2.selectedIndex == 0) {
alert("Please Select a Location");
return false
}

return true
}

</script>

<style type="text/css">
.td_freq { background-color:yellow;
height:40px;
text-align:center;
}
.td_sev { background-colorink;
height:40px;
text-align:center;
}
.td_wi { background-color:lightgreen;
height:40px;
text-align:center;
}
</style>

</head>
<body>

<FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()">

<input type='hidden' name='this1'>

<table align="center" border="1" width="40%">

<tr><td><b>Current Worksite State:</b><font color="red">*</font></td>
<td>
<select name="location" width='53' id="myddl">
<option value="0">--- Please Select Your State ---                 & nbs p;                & n bsp;                                 & nbs p;        </option>
<option value="Western Australia">Western Australia</option>
<option value="Queensland">Queensland</option>

</select>

</td></tr>
<tr><td><b>Location:</b><font color="red">*</font></td>
<td>

</td></tr>

</table>

<tr>
<th colspan="2">
<input type="submit" name='submit' value="Submit" onclick= "return validate()">
</th>
<td colspan="10"> </td>
<th>
<input type='reset' name='reset' value='Clear Form'>
</th>
</tr>
</table>

</FORM>
</body>
</html>

Thankyou very much to everyone that may help

So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box)

My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data.

If you have any other ideas that would be great

Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection.

So in its current state how can I send the selection and place the second DDL within the form??

Thank you

"multiple Dynamic Combo Boxes" Configuration

Similar Tutorials

Hello,

I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters.

Here is what I have so far:
Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

	data_1 = new Option("1", "$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	data_1_3 = new Option("13", "-");

// third combo box

	data_1_1_1 = new Option("111", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_3_1 = new Option("131", "*");

// fourth combo box

	data_1_1_1_1 = new Option("1111","%")
	data_1_1_1_2 = new Option("1112","%")
	data_1_2_1_1 = new Option("1211","%")
	data_1_3_1_1 = new Option("1311","%")
	data_1_3_1_2 = new Option("1312","%")
	data_1_3_1_3 = new Option("1313","%")

// fifth combo box

	data_1_1_1_1_1 = new Option("11111","%")
	data_1_1_1_1_2 = new Option("11112","%")
	data_1_1_1_2_1 = new Option("11121","%")
	data_1_1_1_2_2 = new Option("11122","%")
	data_1_1_1_2_3 = new Option("11123","%")
	data_1_1_1_2_4 = new Option("11124","%")
	data_1_2_1_1_1 = new Option("12111","%")
	data_1_3_1_1_1 = new Option("13111","%")
	data_1_3_1_2_1 = new Option("13121","%")
	data_1_3_1_2_2 = new Option("13122","%")
	data_1_3_1_2_3 = new Option("13123","%")
	data_1_3_1_2_4 = new Option("13124","%")
	data_1_3_1_2_5 = new Option("13125","%")
	data_1_3_1_3_1 = new Option("13131","%")
	data_1_3_1_3_2 = new Option("13132","%")

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

<form>
<table style="width: 49%">
				<tr>
					<td style="width: 200px">Option 1:</td>
					<td style="width: 213px">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="none">-select-</option>
	<option value="1">1</option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 2:</td>
					<td style="width: 213px">
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 3:</td>
					<td style="width: 213px">
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 4:</td>
					<td style="width: 213px">
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
				<tr>
					<td style="width: 200px">Option 5:</td>
					<td style="width: 213px">
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
	<option value="">  </option>
</select></td>
				</tr>
			</table></form>

This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated.

Thanks in advance.

Dynamically Change Currencies With Dropdown

Similar Tutorials

Hello,

I have been looking for this all day - Change currencies throughout the page

when choosing between countries or currencies from dropdown menu.

What I basically need is a dropdown menu which shows countries or currencies.

When you select anyone of it like USD all the prices throughout the page are

changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed

accordingly.

A very good example of this is: http://creativeon.com. When you

change currency from right top dropdown menu - it changes the currencies of

all the packages in the main content.

I am a HTML developer and do not know much about javascripting. Please help me.

P.S. I have searched codingforums.com too and found only two links which are

not of my use because they are currency converter:
http://www.codingforums.com/showthread.php?t=196577
http://www.codingforums.com/showthread.php?t=196373

Best Regards and Thanks in Advance.

How To Make A Drop Down Menu For A Menu

Similar Tutorials

? how would i make it for a menu so you could press it and it would go down to click on a link.

Multiple Drag And Drop

Similar Tutorials

http://www.javascriptkit.com/howto/drag.shtml

Has anyone modified this script to drag multiple items?

Multiple Variables In A Drop Down List

Similar Tutorials

I am creating a quote calculator as a mobile app using the JQuery Mobile plugin in Dreamweaver CS5.5. This supports HTML5 & Javascript.

I have included a drop down list in which the user selects a specific Annual Volume. I have 2 different calculations that need to be done based on the users selection. Different calculations meaning that I need 2 different number values assigned to the option.

For Example:

Calculation #1 (I'm calculating what the Run Quantity is based on what the user selects as the Annual Volume. If user selects an Annual Volume of 150,000 then the calculated result for Run Quantity needs to be 3500)

HTML for this scenario:
Code:

<li data-role="fieldcontain">
    <p><span class="ui-listview-inset">Annual Volume:</label>
      <select name="annualvolume" id="annualvolume">
    
     onChange="Calculate();">
        <option value="1000">10,000</option>
        <option value="2000">30,000</option>
        <option value="3500">150,000</option>
        <option value="6000">300,000</option>
        <option value="10000">500,000</option>
        <option value="20000">1,000,000</option>
        </select>
    </p>
  </li>

Calculation #2 (within the same form as the above calculation, I also need to calculate what the Annual Sales will be. The math to calculate the Annual Sales is to multiply the Final Piece Price (which is another calculation within this form) with Annual Volume. However with this Calculation # 2 I need the value to be 150,000 when user selects 150,000 and NOT 3500 as it was before.

I've tried tweaking the HTML in following manner to assign 2 values within the same drop down, but it didn't work correctly.
Code:

<option value="3500" amount="150000">150,000</option>

My javascript is as follows (please note that I deleted all the result fields except for the 3 that reference my described calculations above. My actual calculator has over 20 results all based on the user's inputs. This is why there are so many variables listed in my javascript - they are for the other results)

Code:

<SCRIPT LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, materialtype, presstype, Etext, Ftext, annualvolume, annualvolume2,Htext, Itext, form)
{
//INPUTS
var A = parseFloat (Atext);
var B = parseFloat (Btext);
var C = document.getElementById('materialtype').value;
var D = document.getElementById('presstype').value;
var E = parseFloat (Etext);
var F = parseFloat (Ftext);
var G = document.getElementById('annualvolume').value;
var GA = document.getElementById('annualvolume').amount;
var H = parseFloat (Htext);
var I = parseFloat (Itext);

//RESULTS
form.RunQuantity.value = G
form.FinalPiecePrice.value = (((C*A) + F) + ((D/G) + E) + (((C*A) + F) + ((D/G) + E )) * (H *.01) + (((C*A) + F) + ((D/G) + E ) + (((C*A) + F) + ((D/G) + E )) * (H *.01)) * (I *.01))
form.AnnualSales.value = (form.FinalPiecePrice.value * GA)
}

</script>

Currently I am simply having the user enter the annual volume twice so I can do the 2 calculations, but this is really clunky and not ideal.

I'm fairly new to Javascript but have learned a lot from reading other posts by people like you. This is the first thing I haven't been able to figure out on my own and any help would be greatly appreciated.

Append Variable To Url In Multiple Drop Down Page.

Similar Tutorials

I have a page with multiple drop down menus for selecting a State then City, then Zip. The State and City both work fine but I can't seem to make the Zip function properly.

Page with drop downs:
Code:

var xmlhttp;
function showCity(state)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_cities.php";
url=url+"?q="+state;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var s=state;
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}


var xmlhttp;

function showZip(city)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_zips.php";
url=url+"?z="+city;
url=url+"&q="+s;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtZip").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
<!--**********
state drop down
*********-->
<? $State = mysql_query("SELECT DISTINCT full_state FROM zip_codes ORDER by full_state",$db_link); ?>
<select name="state" CLASS="formTextbox" size="1"  onChange="showCity(this.value)">
<? while($get = mysql_fetch_array($State)) { ?>
<option value="<?=$get['full_state'];?>"><?=$get['full_state'];?></option><? } ?>
</select>

get_cities.php:
Code:

<?php
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $City = mysql_query("SELECT DISTINCT city FROM zip_codes WHERE full_state = '$q' ORDER BY city",$db_link); ?>
<select name="city" CLASS="formTextbox" size="1" onChange="showZip(this.value)">
<? while($get = mysql_fetch_array($City)) { ?>
<option value="<?=$get['city'];?>"><?=$get['city'];?></option><? } ?>
</select>

get_zips.php:
Code:

<?php
$z=$_GET["z"];
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $Zip = mysql_query("SELECT DISTINCT zip FROM zip_codes WHERE city = '$z' AND full_state = '$q' ORDER by zip",$db_link); ?>
<select name="zip" CLASS="formTextbox" size="1">
<? while($get = mysql_fetch_array($Zip)) { ?>
<option value="<?=$get['zip'];?>"><?=$get['zip'];?></option><? } ?>
</select>

I have my page set to only show the drop down's when there is a value to select. The Zip drop down shows up at the correct time but is empty.

I've tried searching the forum but since I'm still learning js I wasn't able to make use of any on the other multiple drop down examples I came accross.

Thanks for any advice you can offer.

Drop Down Menu Help

Similar Tutorials

I'm trying to make a simple drop down menu for the last item in the menu copied here. I've tried multiple free code on the web without success.
<li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta name="keywords" content="RF, producer, engineer, studio, touring, tours, live, managment, sound, mixing, editing, digital recording.
Tony Levin Band, Tony Levin, Jerry Marotta, Larry Fast, Pete Levin, Jesse Gress, Todd Rundgren, Bill Bruford, Earthworks, Earthworks Underground Orchestra,
BLUE, Joe Jackson, Lance Hoppen, Larry Hoppen, John Hall, Orleans, President Bill Clinton, ETHEL, ABBA's Arrival, ABBA the Tour, Anna Cheek, Jim Weider, The Band, Robbie Dupree, David Sancious, Woodstock, Water's of Eden,
BLUE nights, Pieces of the Sun, Resonator, LIARS DVD, Jesse Gress, John Ferenzik, Prairie Prince, Kasim Sulton, Michael Urbano, The Band 3, Joey Eppard, Chris Gartman, Joe Stote, UKZ, Stickmen, Adrian Belew,
Stickmen,Adrian Belew Power Trio, Julie Slick, Brian Slick, After Show Music, aftershowmusic.com.. ">
<meta name="description" content="Audio engineer, producer, manager RF's home page.
His tour schedule, latest news, audio samples, discography, photos, live sound, contact information. Gear used including Roland Digital Mixer, Bose Radiator Speakers,
Byerdynamic microphones, Shure, Apple computers, MacIntosh, Logic. Ongoing work with Tony Levin, Todd Rundgren Tour Dates, The ABBA Tour Dates, Bearsville Theatre, The Band 3, ABBA the Tour, Stickmen, UKZ, Adrian Belew, ...">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>drop down menu help</title>

<link href="style2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
</head>
<body>
<table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400">
<tr>
<td align="right" width="120" border="0">

<div id="tabs">
<ul>
<li></li>
<li><a href="index.htm"><span>Home</span></a></li>
<li><a href="rlive.html"><span>Live</span></a></li>
<li><a href="rdisc.html"><span>Discography</span></a></li>
<li><a href="rpress.html"><span>Press</span></a></li>
<li><a href="rarch.html"><span>Photos</span></a></li>
<li><a href="toursataglance.html"><span>Tours</span></a></li>
<li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li>
</ul>
</div>

</td>
</tr>
<td>

<table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400">
<tr>

<td><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><img src="n140899968868_3330.jpg" width="200" height="183" border="2"></a>
<br>
<br>
</td>
<td> </td>

<td><a href="MVI_4144AVI.html" target="MVI_4144.AVI" onClick="window.open('','MVI_4144.AVI', config='width=320, height=255, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')"><img src="LiveMix.jpg" alt="RF Live Mix pic click for video" width="320" height="240" border="1"></a>
</td>

</tr>

<br>
<br>
</table>
<table align="center" cellpadding="0" cellspacing="5" bgcolor="#444400" bordercolor="#B5A642" border="0" height="0">
<tr>
<td bgcolor="#B5A642" align="left" width="680"><b><i>Robert Frazza's</i>  Latest Tour Details:</b></td>
</tr>



<tr>
<td align="left" border="0" cellpadding="10" cellspacing="10">
<br>
<b>Eddie Jobson's UK – November</b> 2009 <br><br>
<i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Tony Levin, & John Wetton </i>
<br>
Nov. 3 - Studio Club - Krakow <br>
Nov. 4 - Palladium - Warsaw <br>
Nov. 5 - Filharmonia Pomorska - Bydgoszcz <br>
<br>
<i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Ric Fierabracci, & Adrian Belew </i>
<br>
Nov. 9 - Philharmonic Hall - Perm <br>
Nov.10 - B1 Maximum Club - Moscow <br>
<br>
<i>w /Edddie Jobson, Marco Minnemann, Greg Howe, & Ric Fierabracci </i>
<br>
<strike>Nov. 11 - Crossroads Live Club - Rome</strike>

<br>

</td>
</tr>

<tr>
<td align="left" border="0" cellpadding="10" cellspacing="10">

 
<br>

</td>
</tr>

</table>

<table align="center" cellpadding="3" cellspacing="3" bordercolor="B5A642" border="0" height="25">
<tr>
<br>
<br>
<td span class="contact"><a href="mailto:jen@robertfrazza.com" class="contact">Ashokan Talent Group</a>™

 PO Box 676 - Woodstock, NY 12498

 <a href="mailto:rfrazza@yahoo.com" class="contact">robert@robertfrazza.com</a>
<br>
This web site ia a:  <a href="mailto:nesbproject@yahoo.com" class="contact">NorthEast SoundBase project</a>™
<br>

<script language="JavaScript1.2">

document.write("This web site was last modified on: ", document.lastModified);

</script>
</span>
</td>
</tr>
</table>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11025875-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</td>
</tr>
</table>

</body>
</html>

This is the css -style2.css

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
background-color: #FFFFFF;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
a:link {
text-decoration: none;
color: #997700;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #005588;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #005588;
font-weight: bold;
}
a:active {
text-decoration: none;
color: #000000;
}
.tba {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bold;
}
.contact {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-weight: normal;
text-align: center;
}
a.contact {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
text-align: center;
}
a.contact:hover {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #858585;
font-weight: normal;
text-align: center;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#tabs {
float:left;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
margin-bottom:1em; /*margin between menu and rest of page*/
overflow:hidden;
}

#tabs ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;

}

#tabs li {
display:inline;
margin:0;
padding:0;
}

#tabs a {
float:left;
background:url("left.png") no-repeat left top;
margin:0;
padding:0 0 0 6px;
text-decoration:none;
}

#tabs a span {
float:left;
display:block;
background:url("right.png") no-repeat right top;
padding:6px 15px 4px 6px;
margin-right:2px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
}

#tabs a:hover {
background-position:0% -42px;
}

#tabs a:hover span {
background-position:100% -42px;
}

Need Help With Drop-down Menu

Similar Tutorials

I have some Javascript code for a drop-down menu. The code works fine (will show below) but I was wondering how to turn off one of them? I have a total of 8 icons that have drop-down menus, but I only need 6 of them to do so. If I make any sort of change to the code, it makes all the icons change color when the mouse is hovered over, instead of drop-downs. It seems to be an "all or nothing" situation. Can someone show me how to "turn off" just one of the icons (say the "news" one), so a drop-down doesn't appear? Thank you very much.

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="javascript">
function init() {
	if (TransMenu.isSupported()) {
		TransMenu.initialize();		
		menu1.onactivate = function() { document.getElementById("news").className = "hover"; };
		menu1.ondeactivate = function() { document.getElementById("news").className = ""; };	
		menu2.onactivate = function() { document.getElementById("raceresults").className = "hover"; };
		menu2.ondeactivate = function() { document.getElementById("raceresults").className = ""; };
    }
}
</script>

<tr><td>
<a href="http://www.littlevalleyspeedway.com/test/news.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.littlevalleyspeedway.com/test/layout/nav_news_on.jpg',1)" id="news"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_news_off.jpg" border="0" name="news" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
<a href="http://www.littlevalleyspeedway.com/test/race_results.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navraceresults','','http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_on.jpg',1)" id="raceresults"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_off.jpg" border="0" name="navraceresults" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" />
</td></tr>

<script language="javascript">
if (TransMenu.isSupported()) {
	var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
	var menu1 = ms.addMenu(document.getElementById("news"));
	menu1.addItem();
	var menu2 = ms.addMenu(document.getElementById("raceresults"));
	menu2.addItem();
	TransMenu.renderAll();
}
</script>

Any help would be much appreciated!!

Drop Down Menu

Similar Tutorials

Hi Everyone,
Could someone please help?
I'm rewriting our website at present, and am quite ok with HTML and CSS, but am not particularly au fait with Javascript.

Here's the page I'm having a bit of trouble with:

http://www.ambersupplies.co.uk/thomas/miscellaneous.htm

If you look at the long button marked 'Diagnostics', you'll see it has an arrow and initiates a drop-down menu on mouse-over. My problem is that I wish to further subdivide the three items on the sub-menu, ie, Visual to become sub-menued into Dermatoscope and Penlight. In other words, the Visual button initiates another drop-down menu on mouse-over.

Basically, therefore, I'm trying to expand the Javascript to make this happen, but I just don't seem to able to.

I'd be so very grateful for any help anyone can offer.

Graham

Drop Down Menu

Similar Tutorials

Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this:

HTML and Javascript included below.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

<link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul class="nav">

<li><a href="/home/">Home </a></li>
<li><a href="/products/">Products </a>

<ul>

<li><a href="/products/silverback/">Silverback </a></li>
<li><a href="/products/fontdeck/">Font Deck </a></li>

</ul>

</li>

<li><a href="/services/">Services </a>

<ul>

<li><a href="/services/design/">Design </a></li>
<li><a href="/services/development/">Development </a></li>
<li><a href="/services/ consultancy/">Consultancy </a></li>
</ul>

</li>

<li><a href="/contact/">Contact Us </a></li>

</ul>

</body>
</html>

Drop Down Menu

Similar Tutorials

Can anyone tell me how or point me to a tutorial which shows how to go about coding a drop down menu "without a button", where i can store all my links.
Thanks

Drop-down Menu

Similar Tutorials

Hi,

Please look at the following drop-down menu:
http://www.w3schools.com/JS/tryit.as...yjs_selectmenu

1. How can I set it so the pages open in the parent frame (instead of the same frame)?
2. How can I set it so the pages open in a new window?

Regards
Rain Lover

Drop Down Menu Help

Similar Tutorials

i have done dropdown menu dynamic using php in which data fetched from database(mysql).now i've to do that if i'll choose any option from dropdown menu that particular item's rate will also fetch from data base and display in a text box.that value can also be changed.plzz help me .give some idea.