?
Solved

Dynamic Drop-Down Menu

Posted on 2004-08-23
6
Medium Priority
?
827 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: 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!

 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
Suggested Courses

770 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