Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 830
  • Last Modified:

Dynamic Drop-Down Menu

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
ldbkutty
Asked:
ldbkutty
  • 4
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
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
 
ZvonkoSystems architectCommented:
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
 
ldbkuttyAuthor Commented:
yes, thanks. :)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ZvonkoSystems architectCommented:
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
 
ldbkuttyAuthor Commented:
:-)
0
 
ZvonkoSystems architectCommented:
;-)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now