/    Sign up×
Community /Pin to ProfileBookmark

Three level content changing drop down menus

Copy linkTweet thisAlerts:
Feb 01.2008

Hi all,

I need a three level drop down menu example. When I change the first drop down, second drop down’s content changes automatically (in the meantime third shows all options), when you change the second one the content of third also changes.

So basicly if first one has a value of ‘books’ I want the second one appear with the options sub-categories of books and the third one to list all books until the second drop down changes it to a more specific category.

Anyone has an example script?

Thanks

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@cgishackFeb 01.2008 — Something like so ... ?
<i>
</i>&lt;html&gt;
&lt;head&gt;

&lt;title&gt;Drop Downs&lt;/title&gt;

&lt;script&gt;
var books = new Array();
books[0] = "Name 1";
books[1] = "Name 2";
books[2] = "Name 3";
books[3] = "Name 4";
books[4] = "Name 5";

var authors = new Array();
authors["Name 1"] = new Array('Some Name1','Some Name1','Some Name1','Some Name1','Some Name1','Some Name1');
authors["Name 2"] = new Array('Some Name2','Some Name2','Some Name2','Some Name2','Some Name2','Some Name2');
authors["Name 3"] = new Array('Some Name3','Some Name3','Some Name3','Some Name3','Some Name3','Some Name3');
authors["Name 4"] = new Array('Some Name4','Some Name4','Some Name4','Some Name4','Some Name4','Some Name4');
authors["Name 5"] = new Array('Some Name5','Some Name5','Some Name5','Some Name5','Some Name5','Some Name5');


var type = new Array();
type["Some Name1"] = new Array('Some Type1','Some Type1','Some Type1','Some Type1','Some Type1','Some Type1');
type["Some Name2"] = new Array('Some Type2','Some Type2','Some Type2','Some Type2','Some Type2','Some Type2');
type["Some Name3"] = new Array('Some Type3','Some Type3','Some Type3','Some Type3','Some Type3','Some Type3');
type["Some Name4"] = new Array('Some Type4','Some Type4','Some Type4','Some Type4','Some Type4','Some Type4');
type["Some Name5"] = new Array('Some Type5','Some Type5','Some Type5','Some Type5','Some Type5','Some Type5');


function displayBooks()
{
for (var i=0; i&lt;=books.length -1; i++)
{
var option = new Option(books[i]);
document.getElementById("books").options[i] = option;
}
}

function getAuth(selectMenu)
{
var book = selectMenu.options[selectMenu.selectedIndex].text;
var menu = document.getElementById("auth");
for (var i =0; i&lt;= authors[book].length -1; i++)
{
var option = new Option(authors[book][i]);
menu.options[i] = option;
}
}

function getType(selectMenu)
{
var auth = selectMenu.options[selectMenu.selectedIndex].text;
var menu = document.getElementById("type");
for (var i =0; i&lt;= type[auth].length -1; i++)
{
var option = new Option(type[auth][i]);
menu.options[i] = option;
}
}



&lt;/script&gt;

&lt;/head&gt;

&lt;body onload="displayBooks()"&gt;

Bookes: &lt;select id="books" style="width:120px;" onchange="getAuth(this)"&gt;&lt;/select&gt;
&lt;br /&gt;
Auth: &lt;select id="auth" style="width:120px;" onchange="getType(this)"&gt;&lt;/select&gt;
&lt;br /&gt;
Type: &lt;select style="width:120px;" id="type"&gt;&lt;/select&gt;


&lt;/body&gt;
&lt;/html&gt;



Drew
Copy linkTweet thisAlerts:
@telmessosauthorFeb 02.2008 — hi cgishack,

It is working ok. But I need also two other features.


1) For three drop downs the first option must be "All"

2) Let's say if the first drop down is set to "All", the third's options will show all options. Same for the second.

Let me explain on an example.

Let's say we are talking about the


a) First drop down has the possible options of

All, Fruits, Vegetables.

b) Second has

All, Winter fruits, Summer fruits, Winter vegetables, Summer vegetables

c) Third has

All, Apple, Water melon, Leek, Green Beans



In the beginning the all drop downs will have "All" option selected. And second and third drop downs will have all possible options. If we make a change on the first dropdown, both second and third will bring only the chosen option's sub-options. If the user changes the second without changing the first one, third will bring only that option's sub-options.

So in the beginning the options will be like follows:

First Drop Down Second Drop Down Thirs Drop Down

1) All 1) All 1) All

2) Fruits 2) Winter fruits 2) Apple

3) Vegetables. 3) Summer fruits 3) Water Melon

4) Winter vegetables 4) Leek

5) Summer vegetables 5) Green Beans

At this beginning point:

1) If you change First Drop down to Fruits, second will have the options of Summer Fruit and Winter fruits, third will have Apple and Water melon. So when you change first, both second and third will refresh.

2) If you change Second one without touching the first, third will refresh


I hope I could explain what I need. ?

Also another question with the code you sent. What are the values for the chosen options? Is it possible to specify separately. (Like ID)


Thanks
×

Success!

Help @telmessos spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...