Solved

Dynamic Drop-Down Menu

Posted on 2004-08-23
6
826 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
Independent Software Vendors: 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 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

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…
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 …
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…

689 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