Solved

Dynamic Drop-Down Menu

Posted on 2004-08-23
6
822 Views
Last Modified: 2012-08-14
I want to create dynamic-dropdown menu in Struts.

Say, I have Department, Teams and Members.

I need to populate Teams based on the Department selection and Members based on the Teams selection. (select MULTIPLE)

<TR>
<TD>Department</TD>
<TD colspan="3" >
<select name="department" onchange="deptSelected();" >
<option value="1"> Department A </option>
<option value="2"> Department B </option>
</select>
</TD>
</TR>

<TR>
<TD valign="top" >Teams</TD>
<TD>
<select multiple="true" name="teams" onchange="teamSelected();">
</select>
</TD>
<TD valign="top" >Members</TD>
<TD>
<select multiple="true" name="members">
</html:select>
</TD>
</TR>

Its pretty urgent and JS Experts can save my half-time.
0
Comment
Question by:ldbkutty
  • 4
  • 2
6 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 11868625
I would do it like this:

<TR>
<TD>Department</TD>
<TD colspan="3" >
<select name="department" onchange="this.form.submit();" >
<option value="">-Select-</option>
<option value="1"> Department A </option>
<option value="2"> Department B </option>
</select>
</TD>
</TR>

<TR>
<TD valign="top" >Teams</TD>
<TD>
<select multiple="true" name="teams" onchange="this.form.submit();" >
</select>
</TD>
<TD valign="top" >Members</TD>
<TD>
<select multiple="true" name="members">
</html:select>
</TD>
</TR>


The reason is that any JavaScript function needs to have ALL data at browser side. And that is growing to by toooo much: dept X teams X memebrs := too much.
Do it better on server side if your total count of option combinations is greater then two thousand combinations.


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11868660
Sorry, the assumption with dept x teams x memebers is wrong. You need only ONE array with all memebers. Every memeber has only one team and one department.
So if the total count of memebers is below three hundred memebers then it can be done on browser side. Do you need an example for that?

0
 
LVL 32

Author Comment

by:ldbkutty
ID: 11868695
yes, thanks. :)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 11868956
Here my proposal:

<html>
<head>
<script>
var aMember = [
["1", "a", "Team A-a", "007", "John Doe1"],
["1", "a", "Team A-a", "008", "John Doe2"],
["1", "a", "Team A-a", "009", "John Doe3"],
["1", "a", "Team A-a", "010", "John Doe4"],
["1", "b", "Team A-b", "107", "Jane Doe1"],
["1", "b", "Team A-b", "108", "Jane Doe2"],
["1", "b", "Team A-b", "109", "Jane Doe3"],
["1", "b", "Team A-b", "101", "Jane Doe4"],
["1", "b", "Team A-b", "102", "Jane Doe5"],
["1", "c", "Team A-c", "017", "Johan Doe1"],
["1", "c", "Team A-c", "018", "Johan Doe2"],
["1", "c", "Team A-c", "019", "Johan Doe3"],
["2", "d", "Team B-d", "020", "John2 Doe1"],
["2", "d", "Team B-d", "027", "John2 Doe2"],
["2", "d", "Team B-d", "207", "John2 Doe3"],
["2", "d", "Team B-d", "208", "John2 Doe4"],
["2", "e", "Team B-e", "209", "Jane2 Doe1"],
["2", "e", "Team B-e", "028", "Jane2 Doe2"],
["2", "e", "Team B-e", "029", "Jane2 Doe3"],
["2", "e", "Team B-e", "030", "Jane2 Doe4"],
["2", "e", "Team B-e", "307", "Jane2 Doe5"],
["2", "f", "Team B-f", "047", "Johan2 Doe1"],
["2", "f", "Team B-f", "057", "Johan2 Doe2"],
["2", "f", "Team B-f", "067", "Johan2 Doe3"]];


function deptSelected(theSel){
  theForm = theSel.form;
  opt = theForm.members.options;
  opt.length = 0;
  opt = theForm.teams.options;
  opt.length = 0;
  if(theSel.value=="") return;
  for(i=0;i<aMember.length;i++){
    if(aMember[i][0]==theSel.value){
      tValue = aMember[i][1];
      tName = aMember[i][2];
      for(j=0;j<opt.length;j++){
        if(opt[j].value==tValue) tValue="";
      }
      if(tValue>""){
        opt[opt.length] = new Option(tName, tValue);
      }
    }
  }
}
function teamSelected(theSel){
  theForm = theSel.form;
  opt = theForm.members.options;
  opt.length = 0;
  tOpt = theForm.teams.options;
  for(i=0;i<aMember.length;i++){
    for(j=0;j<tOpt.length;j++){
      if(tOpt[j].selected==true){
        if(aMember[i][1]==tOpt[j].value){
          mValue = aMember[i][3];
          mName = aMember[i][4];
          opt[opt.length] = new Option(mName, mValue);
        }
      }
    }
  }
}
</script>
</head>
<body>
<form>
<table>
<TR>
<TD>Department</TD>
<TD colspan="3" >
<select name="department" onchange="deptSelected(this);" >
<option value="">-Select-</option>
<option value="1"> Department A </option>
<option value="2"> Department B </option>
</select>
</TD>
</TR>

<TR>
<TD valign="top" >Teams</TD>
<TD>
<select multiple="true" name="teams" onchange="teamSelected(this);">
</select>
</TD>
<TD valign="top" >Members</TD>
<TD>
<select multiple="true" name="members">
</select>
</TD>
</TR>
</table>
</form>
</body>
</html>

0
 
LVL 32

Author Comment

by:ldbkutty
ID: 11869265
:-)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11869571
;-)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now