Solved

Dynamic Drop-Down Menu

Posted on 2004-08-23
6
821 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

707 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

13 Experts available now in Live!

Get 1:1 Help Now