Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.


Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

0

Multiple Drop Down Box

Started by Sydney626, Apr 01 2011 02:50 PM

3 replies to this topic

#1 Sydney626

Newbie

Kontributors
0 posts

Posted 01 April 2011 - 02:50 PM

Hello there
I have used the below code to create a double drop down box
1st one show Country
2nd one shows Airport
3rd one shows City

I am not sure what to add to this code to add the third choice drop down box.
Can someone help ?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{

document.formname.subcategory.options.length = 0;
switch (listindex)
{

case "Spain" :
document.formname.subcategory.options[0]=new Option("Select Airport","");
document.formname.subcategory.options[1]=new Option("Barcelona","Barcelona");
document.formname.subcategory.options[2]=new Option("Gerona","Gerona");
document.formname.subcategory.options[3]=new Option("Malaga","Malaga");
document.formname.subcategory.options[4]=new Option("Alicante","Alicante");
document.formname.subcategory.options[5]=new Option("Madrid","Madrid");

break;

case "Greece" :
document.formname.subcategory.options[0]=new Option("Select Airport","");
document.formname.subcategory.options[1]=new Option("Rhodes","Rhodes");
document.formname.subcategory.options[2]=new Option("Athens","Athens");
document.formname.subcategory.options[3]=new Option("Heraklion","Heraklion");
document.formname.subcategory.options[4]=new Option("Corfu","Corfu");
document.formname.subcategory.options[5]=new Option("Zante","Zante");

break;

case "Turkey" :
document.formname.subcategory.options[0]=new Option("Select Airport","");
document.formname.subcategory.options[1]=new Option("Antalya","Antalya");
document.formname.subcategory.options[2]=new Option("Bodrum","Bodrum");
document.formname.subcategory.options[3]=new Option("Dalaman","Dalaman");
document.formname.subcategory.options[4]=new Option("Istambul","Istambul");


break;

}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Country :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Country</option>
<option value="Spain">Spain</option>
<option value="Turkey">Turkey>
<option value="Greece">Greece</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Airport :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Airport</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>

</form> 
 

</body>
</html>


 

</body>
</html>

#2 galexcd

Trap Grand Marshal Member

[MODERATOR]
1,331 posts

Gender:Not Telling
myCENT:39.82

Posted 01 April 2011 - 07:35 PM

Easiest way of doing it without changing the structure of your code too much would be to just copy your dropdownlist function, and use that to check for changes on the second drop down list. Then create a third select element and hook the onchange attribute of the second select element to call the new javascript function you created. It's a bit messy, I'd probably do it a different way. If you want me to I could write you some cleaner code to do this for you when I get home from work tonight.

#3 Sydney626

Newbie

Kontributors
0 posts

Posted 01 April 2011 - 10:34 PM

Hello Galexcd, if you can think of an easier way to create those 3 level drop down box, very interested to hear from you

#4 galexcd

Trap Grand Marshal Member

[MODERATOR]
1,331 posts

Gender:Not Telling
myCENT:39.82

Posted 03 April 2011 - 07:40 PM

Sorry, it took a while to get back to you. I've been quite busy the past few days.

Anyway, I wrote up a quick and minimal javascript function to do all the work you want for you. It supports any level drop down boxes, so if you want to add a 4th drop down box, it should work just fine.

Basically to get it working all you have to do is set up your select options in the way described below, and then copy and paste the block of javascript code somewhere after your select boxes.

To set up the select options, first, add onChange="update(this)" as an attribute to the select element. Then for each select element, add all possible options under that element and set the class equal to the value of the prerequisite.

Here is a simple example:

<form name="formname" method="post" action="">
	<select name="one" onChange="update(this)">
		<option value="">Select #1</option>
		<option value="numbers">Select Numbers</option>
		<option value="letters">Select Letters</option>
	</select>
	
	<select name="two" onChange="update(this)">
		<option value="">Select #2</option>
		<option value="1" class="numbers">1</option>
		<option value="2" class="numbers">2</option>
		<option value="3" class="numbers">3</option>
		
		<option value="a" class="letters">a</option>
		<option value="b" class="letters">b</option>
		<option value="c" class="letters">c</option>
	</select>
	
	<select name="three" onChange="update(this)">
		<option value="">Select #3</option>
		<option value="1.1" class="1">1.1</option>
		<option value="1.2" class="1">1.2</option>
		
		<option value="2.1" class="2">2.1</option>
		<option value="2.2" class="2">2.2</option>

		<option value="3.1" class="3">3.1</option>
		<option value="3.2" class="3">3.2</option>
		
		<option value="a.1" class="a">a.1</option>
		<option value="a.2" class="a">a.2</option>
		
		<option value="b.1" class="b">b.1</option>
		<option value="b.2" class="b">b.2</option>
		
		<option value="c.1" class="c">c.1</option>
		<option value="c.2" class="c">c.2</option>
	</select>
</form>

In this example, we want the options a,b, and c, to show up when the user selects "letters" under the first drop down. Therefore, we set the class equal to "letters". Etc...

And here is the javascript to be inserted anywhere after the select options:

<script type="text/javascript">
var s=Array();
var c=Array();
var a=document.getElementsByTagName("select");
for(i=0;i<a.length;i++){
	b=a[i].options;
	s[i]=Array();
	c[i]=Array();
	for(j=0,k=0;j<b.length;k++){
		s[i][k]=b[j];
		c[i][k]=b[j].className;
		if(c[i][k]!="")b[j]=null;
		else j++;
	}
}
function update(obj){
	for(n=0;n<a.length && obj!=a[n];n++);
	if(++n>=a.length)return;
	while(a[n].options.length>1)a[n].options[1]=null;
	for(i=0;i<s[n].length;i++)
		if(c[n][i]=="" || c[n][i]==obj.value)
			a[n].options[a[n].options.length]=s[n][i];
	a[n].value="";
}
</script>

And now putting it all together using your structure of countries->airports->cities...

<form name="formname" method="post" action="">

	<select name="Country" onChange="update(this)">
		<option value="">Select Country</option>
		<option value="Spain">Spain</option>
		<option value="Turkey">Turkey</option>
		<option value="Greece">Greece</option>
	</select>
	
	<select name="Airport" onChange="update(this)">
		<option value="">Select Airport</option>
		
		<option value="Barcelona" class="Spain">Barcelona</option>
		<option value="Gerona" class="Spain">Gerona</option>
		<option value="Malaga" class="Spain">Malaga</option>
		<option value="Alicante" class="Spain">Alicante</option>
		<option value="Madrid" class="Spain">Madrid</option>
		
		<option value="Antalya" class="Turkey">Antalya</option>
		<option value="Bodrum" class="Turkey">Bodrum</option>
		<option value="Dalaman" class="Turkey">Dalaman</option>
		<option value="Istambul" class="Turkey">Istambul</option>
		
		<option value="Rhodes" class="Greece">Rhodes</option>
		<option value="Athens" class="Greece">Athens</option>
		<option value="Heraklion" class="Greece">Heraklion</option>
		<option value="Corfu" class="Greece">Corfu</option>
		<option value="Zante" class="Greece">Zante</option>
	</select>
	
	
	<select name="City" onChange="update(this)">
		<option value="">Select City</option>
		
		<option value="Barcelona was selected #1" class="Barcelona">Barcelona was selected #1</option>
		<option value="Barcelona was selected #2" class="Barcelona">Barcelona was selected #2</option>
		
		<option value="Rhodes was selected #1" class="Rhodes">Rhodes was selected #1</option>
		<option value="Rhodes was selected #2" class="Rhodes">Rhodes was selected #2</option>
		
		[Replace me with more options for each airport...]
		
	</select>
</form>

<script type="text/javascript">
var s=Array();
var c=Array();
var a=document.getElementsByTagName("select");
for(i=0;i<a.length;i++){
	b=a[i].options;
	s[i]=Array();
	c[i]=Array();
	for(j=0,k=0;j<b.length;k++){
		s[i][k]=b[j];
		c[i][k]=b[j].className;
		if(c[i][k]!="")b[j]=null;
		else j++;
	}
}
function update(obj){
	for(n=0;n<a.length && obj!=a[n];n++);
	if(++n>=a.length)return;
	while(a[n].options.length>1)a[n].options[1]=null;
	for(i=0;i<s[n].length;i++)
		if(c[n][i]=="" || c[n][i]==obj.value)
			a[n].options[a[n].options.length]=s[n][i];
	a[n].value="";
}
</script>

Additional notes:
I wrote this javascript myself from scratch. Anyone can use it for any reason without giving any credit to me.
(I hate people who write simple code like this and add their name in the comments. I mean seriously, you didn't write a library, it's a simple piece of code that took 30 seconds to write... </rant>)

Post-post script:
I know my coding style isn't very readable, but this is ideally how people should write javascript. Javascript is interpreted therefore you should write it as minimal as possible to cut down on loading times. Consider yourself lucky that I didn't remove all whitespace and semicolons before close brackets.

Back to HTML, XML etc.. · Next Unread Topic →

Reply to this topic

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users