...

View Full Version : dynamic dropdown menu



mero
07-25-2011, 04:37 PM
Hi
I have two drop down menus I want the first one has name of the folders and when change the other dropdown has names of the sub-folders of this folder

i have the top folders at the first dropdown
how can i have the subfolders at the second when change first?

the problem is how to open folder

if i have folders

aaaaa has subfolders(1111,2222,2233)
bbbbb has subfolders(3333,4422,2433)
ccccc has subfolders(1131,2232,2532)

and each folder has subfolders how can i have name of these subfolders when change the topfolders(aaaaa,
bbbbb,
ccccc)


I have more than 1000 top folders and eachone have 10 subfolders
already i have all topfolders at first dropdown ,i want to have subfolders at second automatic ,
any help??

Philip M
07-25-2011, 07:43 PM
Try this as an example - but with 1000 folders each with 10 sub-folders you ought to do this using server-side coding.


<html>
<head>
<script type = "text/javascript">

function setOptions(opt) {
var sel2 = document.form1.select2;
sel2.options.length = 0;

if (opt == "1") {
sel2.options[sel2.options.length] = new Option('Apple');
sel2.options[sel2.options.length] = new Option('Pear');
sel2.options[sel2.options.length] = new Option('Strawberry');
sel2.options[sel2.options.length] = new Option('Banana');
sel2.options[sel2.options.length] = new Option('Orange');
sel2.options[sel2.options.length] = new Option('Watermelon');
}

if (opt == "2") {
sel2.options[sel2.options.length] = new Option('Carrots');
sel2.options[sel2.options.length] = new Option('Potato');
sel2.options[sel2.options.length] = new Option('Peas');
sel2.options[sel2.options.length] = new Option('Beans');
sel2.options[sel2.options.length] = new Option('Cauliflower');
}

if (opt == "3") {
sel2.options[sel2.options.length] = new Option('Chicken');
sel2.options[sel2.options.length] = new Option('Veal');
sel2.options[sel2.options.length] = new Option('Beef');
sel2.options[sel2.options.length] = new Option('Pork');
}

if (opt == "4") {
sel2.options[sel2.options.length] = new Option('Cod');
sel2.options[sel2.options.length] = new Option('Haddock');
sel2.options[sel2.options.length] = new Option('Salmon');
sel2.options[sel2.options.length] = new Option('Plaice');
sel2.options[sel2.options.length] = new Option('Kippers');
}

}

function getChoice() {
var s1 = document.form1.select1.options[form1.select1.selectedIndex].text;
var s2 = document.form1.select2.options[form1.select2.selectedIndex].text;
alert ("You selected: " + s1 + " - " + s2);
}

</script>

</head>
<body>

<form name="form1">
<select name="select1" size="1" onChange="setOptions(document.form1.select1.options[document.form1.select1.selectedIndex].value);">
<option value="1">Fruit</option>
<option value="2">Vegetable</option>
<option value="3">Meat</option>
<option value="4">Fish</option>
</select>
<br>
<br>
<select name="select2" size="1">
<option>Apple</option>
<option>Pear</option>
<option>Strawberry</option>
<option>Banana</option>
<option>Orange</option>
<option>Watermelon</option>
</select>

<input type = "button" value = "You selected" onclick = "getChoice()">
</form>

</body>
</html>


We are all going to die at least once. - Author interviewed on BBC Radio 4



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum