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?
 
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
 
Michel PlungjanIT ExpertCommented:
Have google for jsp ajax dropdown
0
 
yogi4lifeCommented:
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Michel PlungjanIT ExpertCommented:
That would be PHP and not JSP!
Nice but not what the asker wanted
0
 
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
 
NyamathkhanAuthor Commented:
ya you are right its working fine thank u man

regards,
nyamath
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.