Populate dropdown box's based on the selection

Hi,

i need to create a jsp page where there will be three drop down boxes. based on the selection of first drop down box the second drop down box options should be populated and based on the selection of second drop down box the third drop down box options must be populated.

can i do it using javascript or css. can any one provide me a simple/sample code by which i can achive this.

Thanks,
nyamath.
NyamathkhanAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Have google for jsp ajax dropdown
0
yogi4lifeCommented:
0
Michel PlungjanIT ExpertCommented:
That would be PHP and not JSP!
Nice but not what the asker wanted
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

NyamathkhanAuthor Commented:
Hi,

Can i have an simple example explained so that i can understand it easly ! the above links are not accessable for me.

Regards,
nyamath.
0
Michel PlungjanIT ExpertCommented:
Sorry I do not have examples other than what is easily found on the net.
For example here: http://www.servletsuite.com/jsp.htm#ajax
0
NyamathkhanAuthor Commented:
Hi,

I have created the jsp page with three drop downs and used javascript to populate the 2 and 3 drop down boxes based on the selection of first drop down box. but the logic is working fine with the 2nd dropdown box but based on the selection of 2nd drop down box the third drop down is not populating.

can any one help me out !

regards,
nyamath.
<script type="text/javascript">
function setOptions(chosen) {
      var selbox = document.myform.Resource;
      selbox.options.length = 0;
      if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please Choose One',' ');
      }
      if (chosen == "BMC-PM-Express-for-Databases-MS-SQL-Server" ) {
        selbox.options[selbox.options.length] = new Option('DRPM2-availability','com_bmc_DRPM2_availability');
        selbox.options[selbox.options.length] = new Option('DRPM2-capacity','com_bmc_DRPM2_capacity');
        selbox.options[selbox.options.length] = new Option('DRPM2-container','com_bmc_DRPM2_container');
        selbox.options[selbox.options.length] = new Option('DRPM2-DatabaseApp','com_bmc_DRPM2_DatabaseApp');
        selbox.options[selbox.options.length] = new Option('DRPM2-FilegroupApp','com_bmc_DRPM2_FilegroupApp');
        selbox.options[selbox.options.length] = new Option('DRPM2-performance','com_bmc_DRPM2_performance');
      }
      if (chosen == "BMC-PM-Express-for-Databases-Oracle" ) {
        selbox.options[selbox.options.length] = new Option('DRPM3-availability','com_bmc_DRPM3_availability');
        selbox.options[selbox.options.length] = new Option('DRPM3-capacity','com_bmc_DRPM3_capacity');
        selbox.options[selbox.options.length] = new Option('DRPM3-container','com_bmc_DRPM3_container');
        selbox.options[selbox.options.length] = new Option('DRPM3-performance','com_bmc_DRPM3_performance');
        selbox.options[selbox.options.length] = new Option('DRPM3-tablespaceinstance','com_bmc_DRPM3_tablespaceinstance');
      }
      }
function setOpt(chosen) {
      var selbox = document.myform.Property;
      selbox.options.length = 0;
      if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
      }
      if (chosen == "com_bmc_DRPM3_capacity") {
        selbox.options[selbox.options.length] = new Option('connectionsremaining','connectionsremaining');
        selbox.options[selbox.options.length] = new Option('UserConnectionsTotal','UserConnectionsTotal');
      }
      if (chosen == "2") {
        selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
        selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
      }
      if (chosen == "3") {
        selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
        selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
      }
  }
}
</script>
</head>
<body>
<jsp:include flush="true" page="./Header.jsp"/><br>
<form name="myform" action = "./ApplicationStatus" method = "post" >
<center><table><tr><td ><font size="5" color="#1B3F8B" face="Verdana"><b> Server Details </b></td></tr></table></center><br>
<center><font size="2" color="#1B3F8B" face="Verdana"><b> Select the Server Credatials to sort report </b></font></center><br>
<input type = "hidden" value = "ServerDetails" name = "name">
<div align="center">
<table align = "center" ><tr>
            <td>&nbsp;&nbsp;&nbsp;</td>
            <td><select name="servername" style="width:122px; font-size:10px;"
                  onchange="setOptions(document.myform.servername.options[document.myform.servername.selectedIndex].value);">
                  <option value=" " selected="selected"> </option>
                  <option value="BMC-PM-Express-for-Servers-Unix-Linux"> Unix-Linux Server </option>
                  <option value="BMC-PM-Express-for-Databases-Oracle"> Oracle DataBase </option>

            </select></td><td>&nbsp;&nbsp;&nbsp;</td>
            <td><select name="Resource" style="width:122px; font-size:10px;"
                  onchange="setOpt(document.myform.Resource.options[document.myform.Resource.selectedIndex].value);">
                  <option value=" " selected="selected">
            </select></td><td>&nbsp;&nbsp;&nbsp;</td>
            <td><select name="Property" style="width:122px; font-size:10px;">
                  <option value=" " selected="selected">
            </select></td><td>&nbsp;&nbsp;&nbsp;</td>
            </tr>
</table><br>
      <center><input type="submit" value = " Fetch " ></center>
</div>
</form>
</body>

Open in new window

0
NyamathkhanAuthor Commented:
can any one help me its urgent
0
Michel PlungjanIT ExpertCommented:
Here
You had a } too many
I made the script simpler too
PS: Please use the "Code" option to paste your code

<script type="text/javascript">
function setOptions(theSel) {
      var chosen = theSel.options[theSel.selectedIndex].value;
      var selbox = theSel.form.Resource;
      selbox.options.length = 0;
      if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please Choose One',' ');
      }
      if (chosen == "BMC-PM-Express-for-Databases-MS-SQL-Server" ) {
        selbox.options[selbox.options.length] = new Option('DRPM2-availability','com_bmc_DRPM2_availability');
        selbox.options[selbox.options.length] = new Option('DRPM2-capacity','com_bmc_DRPM2_capacity');
        selbox.options[selbox.options.length] = new Option('DRPM2-container','com_bmc_DRPM2_container');
        selbox.options[selbox.options.length] = new Option('DRPM2-DatabaseApp','com_bmc_DRPM2_DatabaseApp');
        selbox.options[selbox.options.length] = new Option('DRPM2-FilegroupApp','com_bmc_DRPM2_FilegroupApp');
        selbox.options[selbox.options.length] = new Option('DRPM2-performance','com_bmc_DRPM2_performance');
      }
      if (chosen == "BMC-PM-Express-for-Databases-Oracle" ) {
        selbox.options[selbox.options.length] = new Option('DRPM3-availability','com_bmc_DRPM3_availability');
        selbox.options[selbox.options.length] = new Option('DRPM3-capacity','com_bmc_DRPM3_capacity');
        selbox.options[selbox.options.length] = new Option('DRPM3-container','com_bmc_DRPM3_container');
        selbox.options[selbox.options.length] = new Option('DRPM3-performance','com_bmc_DRPM3_performance');
        selbox.options[selbox.options.length] = new Option('DRPM3-tablespaceinstance','com_bmc_DRPM3_tablespaceinstance');
      }
}
function setOpt(theSel) {
      var chosen = theSel.options[theSel.selectedIndex].value;
      var selbox = theSel.form.Property;
      selbox.options.length = 0;
      if (chosen == " ") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
      }
      if (chosen == "com_bmc_DRPM3_capacity") {
        selbox.options[selbox.options.length] = new Option('connectionsremaining','connectionsremaining');
        selbox.options[selbox.options.length] = new Option('UserConnectionsTotal','UserConnectionsTotal');
      }
      if (chosen == "2") {
        selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
        selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
      }
      if (chosen == "3") {
        selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
        selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
      }
  }
</script>
</head>
<body>
<form name="myform" action = "./ApplicationStatus" method = "post" >
<center><table><tr><td ><font size="5" color="#1B3F8B" face="Verdana"><b> Server Details </b></td></tr></table></center><br>
<center><font size="2" color="#1B3F8B" face="Verdana"><b> Select the Server Credatials to sort report </b></font></center><br>
<input type = "hidden" value = "ServerDetails" name = "name">
<div align="center">
<table align = "center" ><tr>
            <td>&nbsp;&nbsp;&nbsp;</td>
            <td><select name="servername" style="width:122px; font-size:10px;"
                  onchange="setOptions(this);">
                  <option value=" " selected="selected"> </option>
                  <option value="BMC-PM-Express-for-Servers-Unix-Linux"> Unix-Linux Server </option>
                  <option value="BMC-PM-Express-for-Databases-Oracle"> Oracle DataBase </option>

            </select></td><td>&nbsp;&nbsp;&nbsp;</td>
            <td><select name="Resource" style="width:122px; font-size:10px;"
                  onchange="setOpt(this);">
                  <option value=" " selected="selected">
            </select></td><td>&nbsp;&nbsp;&nbsp;</td>
            <td><select name="Property" style="width:122px; font-size:10px;">
                  <option value=" " selected="selected">
            </select></td><td>&nbsp;&nbsp;&nbsp;</td>
            </tr>
</table><br>
      <center><input type="submit" value = " Fetch " ></center>
</div>
</form>
</body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NyamathkhanAuthor Commented:
ya you are right its working fine thank u man

regards,
nyamath
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.