PDA

View Full Version : Drop Down Menus


willdrury
03-14-2006, 09:57 AM
Does anyone one know of a tutorial that will show me how to create a drop down menu that when you select one of the options in the list it determines what options you get in the next drop down menu?

ie/ In the first drop down menu there are the options.. mens, womens.

In the second drop down menu, if you selected mens you get s,m,l,xl,xxl
or if you selected womens you get xs,s,m,l,xl

Thanks

davidj
03-14-2006, 10:29 AM
you can do this using javascript or a server side scripting language

PHP, ASP

do you know any of these

willdrury
03-14-2006, 12:40 PM
I dont really know them well enough

davidj
03-14-2006, 12:59 PM
personally i would learn a server side scripting language (PHP)

its really easy to setup and you will learn quickly. Dynamic drop downs are simple and we will help you out when you need it

what do you say? Go on, give it ago

willdrury
03-14-2006, 01:36 PM
Normally I would try and learn it myself but I really havent got the time and I dont know where to start, so if you could suggest a tutorial to follow I would be very grateful.

Thanks

d a v e
03-14-2006, 01:44 PM
http://www.projectseven.com/tutorials/navigation/index.htm

willdrury
03-14-2006, 01:48 PM
That doesnt seem to be what i'm looking for.

Thanks anyway though

d a v e
03-14-2006, 01:50 PM
ah sorry misunderstood. re-reading it now i see what you mean ;)

willdrury
03-14-2006, 02:09 PM
No worries, anyone know of any tutorials then?

chriskq
03-16-2006, 04:57 AM
http://www.cssplay.co.uk/menus/index.html

this site rocks for learning how to make 'choice' looking menus ... dropdown or watever. If your usign FF (get the web developer extension) and you can view their css source... so its pretty simple to replicate the menu the've done, then tweak it to suit ur taste/page.

i can help ya out if u have a specific Q relating to an example or something.

d a v e
03-16-2006, 09:25 AM
i think chriskq that stu nicholls site doesn't offer what the OP is looking for, unless i missed it :)

davidj
03-16-2006, 09:35 AM
willdrury. I wrote one for you last night but forgot to bring it in

i will post the full script in the morning GMT (friday)

willdrury. It not a hard script to work out and i will help if you get stuck


(and to who else it may concern)

ITS A VERY EASY SCRIPT!

http://www.dreamweaverclub.com/forum/viewtopic.php?t=2356

ramandeep
03-16-2006, 09:37 AM
He he he DJ :D

davidj
03-17-2006, 09:28 AM
here you go

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">

function dj(){
var d1 = document.getElementById("select1").value;

switch(d1){
case '1': drop1('1'); break;
case '2': drop1('2'); break;
case '3': drop1('3'); break;
case '4': drop1('4'); break;
case '5': drop1('5'); break;
}
}



function drop1(o){
var dv2 = document.getElementById("no2");
var dv3 = document.getElementById("no3");

switch(o){
case '1':
var p1 = '<select name="select2" id="select2"><option selected>Select</option><option value="1">option 1</option><option value="2">option 2</option><option value="3">option 3</option><option value="4">option 4</option><option value="5">option 5</option></select>';
dv2.innerHTML = p1;
break;

case '2':
var p2 = '<select name="select3" id="select3"><option selected>Select</option><option value="1">option 11</option><option value="2">option 12</option><option value="3">option 13</option><option value="4">option 14</option><option value="5">option 15</option></select>';
dv2.innerHTML = p2;
break;

case '3':
var p3 = '<select name="select4" id="select4"><option selected>Select</option><option value="1">option 111</option><option value="2">option 112</option><option value="3">option 113</option><option value="4">option 114</option><option value="5">option 115</option></select>';
dv2.innerHTML = p3;
break;

case '4':
var p4 = '<select name="select4" id="select4"><option selected>Select</option><option value="1">option a</option><option value="2">option b</option><option value="3">option c</option><option value="4">option d</option><option value="5">option e</option></select>';
dv2.innerHTML = p4;
break;


case '5':
var p5 = '<select name="select4" id="select4"><option selected>Select</option><option value="1">option r</option><option value="2">option h</option><option value="3">option y</option><option value="4">option u</option><option value="5">option s</option></select>';
dv2.innerHTML = p5;
break;
}


}

</script>
</head>

<body>



<select name="select1" id="select1" onChange="dj()">
<option selected>Select</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
</p>
<div id="no2"></div>
<div id="no3"></div>
</body>
</html>