asked on

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.

Michel Plungjan

Have google for jsp ajax dropdown

yogi4life

Here is a demo:
http://remysharp.com/wp-content/uploads/2007/09/select-chain.php

Here is the explanation going with it:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/

Michel Plungjan

That would be PHP and not JSP!
Nice but not what the asker wanted

Nyamathkhan

ASKER

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.

Michel Plungjan

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

Nyamathkhan

ASKER

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

Nyamathkhan

ASKER

can any one help me its urgent

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Nyamathkhan

ASKER

ya you are right its working fine thank u man

regards,
nyamath