JavaScript - Dropdown Menus That Work In All Browsers?

Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered.

1. Example of three tier (3 dropdowns required only):
Scooters (dropdown 1)
Three Wheel Scooters (dropdown 2)
Delux 503S Bird Scooter (dropdown 3)

2. Example of two tier (2 dropdowns required only):
Standing Bikes (dropdown 1)
Children 300 Series (dropdown 2)

If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter

In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list)

The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'.

I hope this makes sense. Let me know if you require clarrification.

Here is the code:

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", "$");
	data_2 = new Option("2", "$$");

// second combo box

	data_1_1 = new Option("11", "-");
	data_1_2 = new Option("12", "-");
	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

	data_1_1_1 = new Option("111", "*");
	data_1_1_2 = new Option("112", "*");
	data_1_1_3 = new Option("113", "*");
	data_1_2_1 = new Option("121", "*");
	data_1_2_2 = new Option("122", "*");
	data_1_2_3 = new Option("123", "*");
	data_1_2_4 = new Option("124", "*");
	data_2_1_1 = new Option("211", "**");
	data_2_1_2 = new Option("212", "**");
	data_2_2_1 = new Option("221", "**");
	data_2_2_2 = new Option("222", "**");
	data_2_3_1 = new Option("231", "***");
	data_2_3_2 = new Option("232", "***");

// fourth combo box

	data_2_2_1_1 = new Option("2211","%")
	data_2_2_1_2 = new Option("2212","%%")

// 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>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">1</option>
	<option value="value3">2</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>

</select>

</form>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

I have a function which allows the number of buttons selected depending on the number selected from the drop down menu. Problem is that this code works in all of the major browsers except for Internet Explorer (No Suprise). For example if user chose the number 3 from the dropdown menu, then user can only select 3 buttons.

Why is it not working in Internet explorer and what can be used to make it work in Internet Explorer?

Below is javascript functions:
Code:

function getButtons()
{
	document.getElementById("answerA").class="answerBtnsOff";
	document.getElementById("answerA").setAttribute("class","answerBtnsOff");
	document.getElementById("answerA").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerB").class="answerBtnsOff";
	document.getElementById("answerB").setAttribute("class","answerBtnsOff");
	document.getElementById("answerB").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerC").class="answerBtnsOff";
	document.getElementById("answerC").setAttribute("class","answerBtnsOff");
	document.getElementById("answerC").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerD").class="answerBtnsOff";
	document.getElementById("answerD").setAttribute("class","answerBtnsOff");
	document.getElementById("answerD").setAttribute("className","answerBtnsOff");
 
	document.getElementById("answerE").class="answerBtnsOff";
	document.getElementById("answerE").setAttribute("class","answerBtnsOff");
	document.getElementById("answerE").setAttribute("className","answerBtnsOff");
 
	currenttotal=0;
}
function btnclick(btn)
{
 	if(document.getElementById("numberDropId").value=="")
 	{
	 	alert('You must first select the number of answers you require from the drop down menu');
	 	return false;
	}
	if (btn.class=="answerBtnsOn")
	{
		btn.class="answerBtnsOff";
		btn.setAttribute("class","answerBtnsOff");
		btn.setAttribute("className","answerBtnsOff");
 
		currenttotal--;
		return false;
	}
 	if(document.getElementById("numberDropId").value==currenttotal)
 	{
 	 	alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
 		return false;
 	}
	if (btn.class=="answerBtnsOff")
	{
		btn.class="answerBtnsOn";
		btn.setAttribute("class","answerBtnsOn");
		btn.setAttribute("className","answerBtnsOn");
		currenttotal++;
		return false;
	}
 
}

If you html code then this is below:

Code:

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
    <td>Question:</td> 
    <td rowspan="3">
        <textarea rows="5" cols="40" name="questionText"></textarea>
    </td>
    <td>Option Type:</td> 
    <td>
        <select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
    </td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td>
<span id="na">N/A</span>
<select name="numberDrop" id="numberDropId" onChange="getButtons()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>

Hi - if you click on any of these radio boxes an effect happens whereby content is pushed down. Can you tell me what causes this?

http://www.emailcraft.com/order-now.html

The reason I ask is because I am after this effect and am looking for someone to code it for me - but am not sure how to describe it - thanks a lot

Hi Coders,

I have a Javascript on my credit card page which populates the elements of a dropdown field (The Year field).
It just works with Internet Explorer and not Firefox.

Here is the script:

<script type="text/javascript">
<%
Dim orderDateYearx
orderDateYearx = cStr(Year(Date))
%>

yy="<%=orderDateYearx%>";
yyyy=parseInt(yy);
yyyy=yyyy

var listDocUpload = document.getElementById("expDate2");
var optn = document.createElement("OPTION");
optn.value = yyyy;
yyyy=yyyy+""
optn.text = yyyy.replace("20","");
listDocUpload.options.add(optn);

yyyy=parseInt(yyyy)+1
var optn2 = document.createElement("OPTION");
optn2.value = yyyy;
yyyy=yyyy+""
optn2.text = yyyy.replace("20","");
listDocUpload.options.add(optn2);

yyyy=parseInt(yyyy)+1
var optn3 = document.createElement("OPTION");
optn3.value = yyyy;
yyyy=yyyy+""
optn3.text = yyyy.replace("20","");
listDocUpload.options.add(optn3);
</script>

The dropdown field in Firefox is just blank. I mean no elements reside within it. (but its clickable)

Any ideas why this dropdown field in Firefox is not going to be populated?
Thank you for all the comments.

I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed.
Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
	position:absolute;
	width:80px;
	height:50px;
	z-index:1;
	left: 0px;
	top: 0px;
}


#eye_wrapper{/*This is a master div for easy placement of the others*/
	position:absolute;
	width:80px;
	height:50px;
	z-index:2;
	left: 275px;
	top: 200px;
}
</style>



<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed
			
function visaOga(){
		document.getElementById(eyes.splice(0,1)).style.display="block";
		if(eyes.length==0){
			document.getElementById("a").style.display="none";
			document.getElementById("b").style.display="none";
			document.getElementById("c").style.display="none";
			
			dBort = function(){
			document.getElementById("d").style.display="none";
			eyes=["a","b","c","d"];
			}
			setTimeout(dBort,1500);//So last image is shown 1.5 sec
			return;//Aborts - dBort -. Sequence can start over
			if(document.getElementById("d").style.display=="none"){
			startAnim;//Strts sequence if last image invisible
			}
			}
			}

            </script>
</head>

<body>


<!--Images in own div invisible at start-->
<div id="eye_wrapper">
  <div class="eyesPos" id="a" style= display:none;>
    <embed src="0.svg" width="80" height="50" />
  </div>
  
  <div class="eyesPos" id="b" style= display:none;>
    <embed src="1.svg" width="80" height="50" />
    </div>
  
  <div class="eyesPos" id="c" style= display:none;>
    <embed src="2.svg" width="80" height="50" />
  </div>
  
  <div class="eyesPos" id="d" style= display:none;>
    <embed src="3.svg" width="80" height="50" />
  </div>
</div>





</body>
</html>

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

hey guys
The first dropdown has some options as :
abc(a)
bcd(a)
cde(b)
def(b)
efg(c)
fgh(c)
The second dropdown has :
a
b
c
On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance.

Hello, I am completely new to HTML/JS/CSS, therefore I know very little.

I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July".

I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected).

If it matters, I am using IE8. Thanks!

Hi,

I have two dropdown lists with the second one being dependent on the selection in the first.

Options in list 1:
1,3 or 4

List two should be enabled when 3 or 4 is selected in list 1.

So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form:

Code:

<select name="fw[$i]" id="fw[$i]">
<option value="1">FWH</option>
<option value="3">links</option>
<option value="4">rechts</option>
<option value="0" selected></option>
</select><br />
<select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);">
<option value="0" selected>---</option>
<option value="1">gut</option>
<option value="2">schlecht</option>
<option value="3">Strafschlag</option>
<option value="4">OB</option>
</select>

$i is my index generated by my PHP script and runs from 1 to 18.
Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field.

Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable.

Code:

function showBox(field,val) {
		
if (val > 1) {		
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
	
}

Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem.
Thanks in advance!
Joe

I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.

Code:

<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

	if(curVisible != null) {
		oldObject = curVisible;
	}

	if(!inMotion) {
		curVisible = obj;		
		pusher = -100;
		pushBack = 40;
		document.getElementById(obj).style.visibility = "visible";
		document.getElementById(obj).style.bottom = pusher+"px";
		animateOut();
		animateIn();
	}
}

function hide() {
	animateIn();
}


function animateIn() {
	if (pushBack > -100) {
		inMotion = true;
		pushBack -=4;
		document.getElementById(oldObject).style.bottom = pushBack+"px";
		setTimeout(animateIn, 20);
	} else {
		document.getElementById(oldObject).style.visibility = "hidden";
		inMotion = false;
	}
}


function animateOut() {
	
	if(pusher < 40) {
		inMotion = true;
		pusher += 4;
		document.getElementById(curVisible).style.bottom = pusher+"px";
		setTimeout(animateOut, 20);
	} else {
		inMotion = false;
	}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

Hello, i am trying to implement JavaScript menus for my website. I've used a ready-made one from apycom.
The menu works fine, however the problem is that whenever i try to have more than one of the same menu, the second menu does not work.

I'm generally a PHP coder, and i'm not very useful when it comes to JavaScript, so please excuse me. I'll bring some code into this:

Quote:
<div id="menu">
<ul class="menu" id="menu">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>
<!-- <li><a href="browse.php?id=84&<?php echo "sort=".$sort; ?>"><span>Sign-In</span></a></li> -->
<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="menu">
<ul class="menu" id="menu2">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>
<!-- <li><a href="browse.php?id=84&<?php echo "sort=".$sort; ?>"><span>Sign-In</span></a></li> -->
<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
You can ignore the hrefs, there for local use. I'm under the impression the identities of each menu is duplicated, but i'm not sure how to allow separation of identities. The second menu works, mouseover the menu comes up but the fade effect does not work.
Can someone please help?
Thank you.

I want to make a menu like this web site :http://www.petrobras.com.br/pt/
When your move the cursor on it , a new windows open and there is a picture in left side and submenues in right side

I myself think it is a jquery tool but I don't know how to make some thing like this

How can I do so ?

thanks