Triple Drop Down List Using Javascript

<!-- The first select list -->
                                                                                    <select class="textfield" name="slist1" onchange="SList.getSelect('slist2', this.value);">
                                                                                        <option  value="000" selected="selected">Select Option</option>
                                                                                        <option value="Government">Government User</option>
                                                                                        <option value="PSU & Statutory Bodies">PSU & Statutory Bodies</option>
                                                                                        <option value="NIC">National Informatics Center</option>
                                                                                        <option value="Registered Companies">Registered Companies</option>
                                                                                    </select>
                                                                                    <!-- Tags for the other 2 dropdown list, and for text-content -->

<!-- The second select list -->

<span id="slist2" ></span>
 <!-- The Third  select list -->                                                                                                                                                                       <span id="slist3"  ></span>

                                                                                                                                                                        <div align="center" id="scontent" ></div>


<script><!--
            /* Script Triple Select Dropdown List, from: www.coursesweb.net/javascript/ */
            var SList = new Object();             // JS object that stores data for options

            // HERE replace the values with the text you want to be displayed near Select
            var txtsl2 = 'Selected Media :';         // text for the seccond dropdown list
            var txtsl3 = 'Payment Option :';         // text for the third dropdown list

            /*
         Property with options for the Seccond select list
         The key in this object must be the same with the values of the options added in the first select
         The values in the array associated to each key represent options of the seccond select
             */
            SList.slist2 = {







                "Government": ['.Smart Card','.Smart Card & Reader', '.USB Token', '.SSL/Renewal'],
                "PSU & Statutory Bodies": ['Smart.. Card', 'Smart.. Card & Reader', 'USB..Token', 'SSL/..Renewal'],
                "NIC": ['.Smart. Card', '.Smart. Card & Reader', '.USB. Token', '.SSL./Renewal'],
                "Registered Companies": ['.Smart.. Card', '.Smart.. Card & Reader', '.USB.. Token', '.SSL/..Renewal'],
            };

            /*

         Property with options for the Third select list
         The key in this object must be the same with the values (options) added in each Array in "slist2" above
         The values in the array associated to each key represent options of the third select
             */
            SList.slist3 = {
                ".Smart Card": ['.Demand Draft', '.Payment Directly'],
                ".Smart Card & Reader": ['..Demand Draft', '..Payment Directly'],
                ".USB Token": ['...Demand Draft','...Payment Directly'],
                ".SSL/Renewal": [ '.No Payment to be made'],
                "Smart.. Card": ['Deamnd.. Draft','Payment..Directly'],
                "Smart.. Card & Reader": ['.Demand.. Draft','.Payment..Directly'],
                "USB.. Token": ['Demand..Draft','Payment..Directly'],
                "SSL/..Renewal": ['Demand...Draft','Payment...Directly'],
                ".Smart. Card": ['.No Payment to be made for NIC'],
                ".Smart. Card & Reader": [ '..No Payment to be made for NIC'],
                ".USB. Token": ['No. Payment to be made for NIC'],
                ".SSL./Renewal": ['No.. Payment to be made for NIC'],
                ".Smart.. Card": ['..Demand..Draft','..Payment.. Directly'],
                ".Smart.. Card & Reader": ['.Demand..Draft','.Payment.. Directly'],
                ".USB.. Token": ['.Demand.Draft.','.Payment.Directly.'],
                ".SSL/..Renewal": ['.Demand.Draft..','.Payment.Directly..'],
            };

            /*
         Property with content associated to the options of the third select list
         The key in this object must be the same with the values (options) added in each Array in "slist3" above
         The values of each key represent the content displayed after the user selects an option in 3rd dropdown list
             */
            SList.scontent = {
                ".Demand Draft": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="draft_amount"  readonly="readonly" value="716" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text"  class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        ".Payment Directly": ' PAYMENT DIRECTLY',






        "..Demand Draft": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0" ><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="drft_amnt"  readonly="readonly" value="716" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input class="textfield" type="text" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        "..Payment Directly": 'SMART CARD READER PAYMENT DIRECTLY',
        "GUSB_Checque /Draft": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="draft_amount"  readonly="readonly" value="555" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text" class="textfield" name="bank_branch" id="place3"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select  class="textfield" name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        "...Demand Draft": 'GOVT USB NO PAYMENT',
        "GUSB_Payment Directly": 'GOVT USB PAYMENT DIRECTLY',

        "GSSL_No Payment to be made": 'For RENEWAL/SSL NO PAYMENT to be made',



        "PSC_Checque /Draft": '<table border="0"  bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" name="draft_amount" class="textfield" id="draft_amount"  readonly="readonly" value="916" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input class="textfield" type="text" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text" class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        "PSC_Payment Directly": 'For PSU and Statutory Body PAYMENT DIRECTLY',
        "PSCR_Checque /Draft": '<table border="0"  bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="drft_amnt"  readonly="readonly" value="916" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input class="textfield" type="text" name="bank_branch" id="place3"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        "PSCR_Payment Directly": 'For PSU and Statutory Body PAYMENT DIRECTLY',
        "PUSB_Checque /Draft": '<table border="0"  bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield"  name="draft_amount" id="draft_amount"  readonly="readonly" value="755" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text" class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',


        "PUSB_Payment Directly": 'For PSU and Statutory Body PAYMENT DIRECTLY',
        "PSSL_Checque /Draft": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="draft_amount"  readonly="readonly" value="200" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text" class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        "PSSL_Payment Directly": 'For PSU and Statutory Body PAYMENT DIRECTLY',


        ".No Payment to be made for NIC": 'No Payment to be made for NIC',


        "..No Payment to be made for NIC": 'No Payment to be made for NIC',

        "No. Payment to be made for NIC": 'No Payment to be made for NIC',

        "No.. Payment to be made for NICC": 'No Payment to be made for NIC',


        "..Demand..Draft": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="draft_amount"  readonly="readonly" value="916" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text"class="textfield"  name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input class="textfield" type="text" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select class="textfield"name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',
       // "..Payment.. Directly": 'Content for s2o1_1_opt2',
        "..Payment.. Directly": 'PAYMENT DIRECTLY',
        ".Demand..Draft": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" name="draft_amount" class="textfield" id="draft_amount"  readonly="readonly" value="916" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text" class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        ".Payment.. Directly": 'For Registered Companies Body PAYMENT DIRECTLY',
        ".Demand.Draft.": '<table border="0" bordercolor="#3366FF"  cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input class="textfield"  type="text" name="draft_amount" id="draft_amount"  readonly="readonly" value="755" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text" class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        ".Payment.Directly.": 'For Registered Companies Body PAYMENT DIRECTLY',
        ".Demand.Draft..t": '<table border="0" bordercolor="#3366FF" cellpadding="0" cellspacing="0"><tr> <td colspan="2"><font color="red">DD in favour of  "Accounts Officer, NIC Delhi" payable at New Delhi*</font> </td></tr><tr> <td>Draft Amount<strong><font color="red">*</font> </td><td><input type="text" class="textfield" name="draft_amount" id="draft_amount"  readonly="readonly" value="200" size="35"/><i>(Not editable)</i></td>\n\
        <tr><td>Draft No.<font color="red">*</font></td><td><input type="text" class="textfield" name="draft_no" id="draft_no"  size="35"/></td></tr>\n\
         <tr><td>Draft Bank &amp; Branch<font color="red">*</font></td><td><input type="text"  class="textfield" name="bank_branch" id="bank_branch"  size="35"/></td></tr>\n\<br/>\n\
        \n\
        <tr><td>Draft Date (DD/MM/YYYY)<font color="red">*</font></td><td><select name="dd_date">\n\  <option value="000" selected="selected">Date</option>\n\
<?php
for ($i = 1; $i <= 31; $i++) {
    echo "<option>$i</option>";
}
?>\n\
                                                                </select>&nbsp;<select name="dd_month">\n\
                                                                    <option value="000">month</option>\n\
<?php
for ($i = 1; $i <= 12; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>&nbsp;<select name="dd_year">\n\
                                                                    <option value="000">Year</option>\n\
<?php
for ($i = 2012; $i <= 2050; $i++)
    echo "<option>$i</option>";
?>\n\
                                                                </select>\n\
                                                                </td></tr>\n\</table>\n\ ',

        ".Payment.Directly..": 'For Registered Companies Body PAYMENT DIRECTLY',

    };

    /* From here no need to modify */

   SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';           // empty option-content

  if(SList[slist][option]) {
    // if option from the last Select, add text-content, else, set dropdown list
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
    else {
      var addata = '<option>Select Option</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      // cases for each dropdown list
      switch(slist) {
        case 'slist2':
          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">'+addata+'</select>';
          document.getElementById('slist3').innerHTML = '';
          break;
        case 'slist3':
          document.getElementById('slist3').innerHTML = txtsl3+' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
          break;
      }
    }
  }
  else {
    // empty the tags for select lists
    if(slist == 'slist2') {
      document.getElementById('slist2').innerHTML = '';
      document.getElementById('slist3').innerHTML = '';
    }
    else if(slist == 'slist3') {
      document.getElementById('slist3').innerHTML = '';
    }
  }
}
        --></script>

Display Hidden Value using Radio Button

Blue Text - Radio button
Green Text - Javascript 

-----------------------------------------------------------------------------------------------------------

<table width="600" height="65" border="0" bordercolor="#3366FF" cellpadding=
                                                                                                                   "1" cellspacing="1">
                                                                                                                <tr>            <td >width="115"><input type="radio" name="certificate_required" value="Individual Certificate" onclick="doClick2(this)">
                                                                                                                            Individual Certificate</td>
                                                                                                                  <td width="133"><input type="radio" name="certificate_required" value="Time Stamping" onclick="doClick2(this)">
                                                                                                                  Time Stamping</td>
                                                                                                                  <td width="147"><input type="radio" name="certificate_required" value="Code Signing" onclick="doClick2(this)">
                                                                                                                    Code Signing</td>
                                                                                                                    <td width="192">
                                                                                                                        <input type="radio" name="certificate_required" value="SSL Server" onclick="doClick2(this)">
                                                                                                                            SSL Server


                                                                                                                    </td>
                                                                                                                </tr>
                                                                                                                <tr>

                                                                                                                </tr>
                                                                                                            </table></td>
                                                                                                    </tr>
                                                                                                    <tr>


                                                                                                        <td colspan="2">

                                                                                                        </td>

                                                                                                    </tr>
                                                                                                    <tr>
                                                                                                        <td>&nbsp;</td>
                                                                                                        <td><table width="413" height="31" border="0" cellpadding="1" cellspacing="1">
                                                                                                                <tr>
                                                                                                                    <td bordercolorlight="#6699FF"> 
                                                                                                                        <div id="otherOpt2" style="display:none">


                                                                                                                            <input type="radio" name="Encryption_Certificate" value="Individual Signing">Individual Signing 
                                                                                                                                <br/>
                                                                                                                                <input type="radio" name="Encryption_Certificate" value="Singning Encryption"> Singning Encryption </div></td>
                                                                                                                                    <td bordercolorlight="#6699FF"><div id="textbox2" style="display:none"> <br/>
                                                                                                                                            Web Server<font color="red">*</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                                                                            <input type="text" class="header1" name="abc1">
                                                                                                                                                <br/>
                                                                                                                                                <br/>
                                                                                                                                                Service<font color="red">*</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="header1" type="text" name="abc2">
                                                                                                                                                    <br/>
                                                                                                                                                    <br/>
                                                                                                                                                    IP Address<font color="red">*</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                                                                                    <input type="text" class="header1" name="abc3">
                                                                                                                                                        <br/>
                                                                                                                                                        <br/>
                                                                                                                                                        Domain Name<font color="red">*</font> &nbsp;&nbsp;&nbsp;
                                                                                                                                                        <input type="text" class="header1" name="abc4">
                                                                                                                                                            <br/>
                                                                                                                                                            <br/>
                                                                                                                                                            Physical Location<font color="red">*</font> 
                                                                                                                                                            <input class="header1" type="text" name="abc5">
                                                                                                                                                                </div>    </td>
                                                                                                                                                                </tr>
                                                                                                                                                                </table>




        <script type="text/javascript">
            function doClick2(objRad){
                if (objRad.value=="Individual Certificate"){
                    document.getElementById("textbox2").style.display='none'; //hide textbox

                    document.getElementById("otherOpt2").style.display='block'; //show other options
                }
                else if (objRad.value=="SSL Server"){
                    document.getElementById("otherOpt2").style.display='none'; //hide other options
                    document.getElementById("textbox2").style.display='block'; //show textbox
                }
else if (objRad.value=="Time Stamping"){
                    document.getElementById("otherOpt2").style.display='none'; //hide other options
                    document.getElementById("textbox2").style.display='none'; //show textbox
                }
else if (objRad.value=="Code Signing"){
                    document.getElementById("otherOpt2").style.display='none'; //hide other options
                    document.getElementById("textbox2").style.display='none'; //show textbox
                }

            }
        </script>

Double drop down list Example with Javascript

Double drop down list Example with Javascript 
Example of Double drop down list , when selecting one drop drown list item automatically display the result of another drop down list. Blue Text represents the drop down item you can  paste it on a html form., green text represents the java scripts items.

<select class="textfield" name="Class" onChange="changeFilesDMA()" size="width:120">
                                                                                        <option  value="000" selected="selected">Select class of Certificate</option>

                                                                                        <option value="Class I">Class I

                                                                                            <option value="Class II">Class II

                                                                                                <option value="Class III" onclick="alert('ClassIII User need to be physically present')">Class III



                                                                                                    </select>
                                                                                                    <!-- this menu holds the files to go-->


                                                                                                    <select name="menuFilesDMA" onChange="goDMA(this)"  ">
//style="display:none;visibility:hidden;

                                                                                                        <option value="none"> 
                                                                                                        </option>
                                                                                                    </select>




second example 


<select  class="textfield"name="State" onChange="changeFilesDMAA()"  >

                                                                                                                                                                            <option  value="000" selected="selected">Select State</option>
                                                                                                                                                                            <option  value="ANDAMAN AND NICOBAR">ANDAMAN AND NICOBAR </option>
                                                                                                                                                                            <option  value="ANDHRA PRADESH">ANDHRA PRADESH</option>
                                                                                                                                                                            <option  value="ARUNACHAL PRADESH">ARUNACHAL PRADESH</option>
                                                                                                                                                                            <option  value="ASSAM">ASSAM</option>
                                                                                                                                                                            <option  value="BIHAR">BIHAR</option>
                                                                                                                                                                            <option  value="CHANDIGARH">CHANDIGARH</option>
                                                                                                                                                                            <option  value="CHHATISHGARH">CHHATISHGARH</option>
                                                                                                                                                                            <option  value="DELHI">DELHI</option>
                                                                                                                                                                            <option  value="GOA">GOA</option>
                                                                                                                                                                            <option  value="GUJARAT">GUJARAT</option>
                                                                                                                                                                            <option  value="HARYANA ">HARYANA </option>
                                                                                                                                                                            <option  value="HIMACHAL PRADESH">HIMACHAL PRADESH</option>
                                                                                                                                                                            <option  value="JAMMU AND KASHMIR ">JAMMU AND KASHMIR </option>
                                                                                                                                                                            <option  value="JHARKHAND">JHARKHAND</option>
                                                                                                                                                                            <option  value="KARNATAKA">KARNATAKA</option>
                                                                                                                                                                            <option  value="KERALA ">KERALA </option>
                                                                                                                                                                            <option  value="LAKHSWADEEP">LAKHSWADEEP</option>
                                                                                                                                                                            <option  value="MADHYA PRADESH">MADHYA PRADESH</option>
                                                                                                                                                                            <option  value="MAHARASHTRA">MAHARASHTRA</option>
                                                                                                                                                                            <option  value="MANIPUR">MANIPUR</option>
                                                                                                                                                                            <option  value="MEGHALAYA ">MEGHALAYA </option>
                                                                                                                                                                            <option  value="MIZORAM ">MIZORAM </option>
                                                                                                                                                                            <option  value="NAGALAND">NAGALAND</option>
                                                                                                                                                                            <option  value="ORISSA">ORISSA</option>
                                                                                                                                                                            <option  value="PONDICHERRY ">PONDICHERRY </option>
                                                                                                                                                                            <option  value="PUNJAB">PUNJAB</option>
                                                                                                                                                                            <option  value="RAJASTHAN">RAJASTHAN </option>
                                                                                                                                                                            <option  value="SIKKIM  ">SIKKIM  </option>
                                                                                                                                                                            <option  value="TAMILNADU">TAMILNADU</option>
                                                                                                                                                                            <option  value="TRIPURA ">TRIPURA </option>
                                                                                                                                                                            <option  value="UTTARAKHAND">UTTARAKHAND</option>
                                                                                                                                                                            <option  value="UTTAR PRADESH ">UTTAR PRADESH </option>
                                                                                                                                                                            <option  value="WEST BENGAL ">WEST BENGAL  </option>


                                                                                                                                                                        </select>
                                                                                                                                                                        <select name="menuFilesDMAA" onchange="goDMA(this)"   >
//style="display:none;visibility:hidden
                                                                                                                                                                                <option value="none"> </option>
                                                                                                                                                                        </select>
                                                                                                                                                                        <!-- this menu holds the files to go-->





------------------------------------------------------------------------------------------------



<script language="javascript">

                <!-- 

                //new Option("text","value")

                //this code changes menus








                function nullOptionsDMA(aMenu){

                    var tot=aMenu.options.length

                    for (i=0;i<tot;i++)

                    {

                        aMenu.options[i]=null

                    }

                    aMenu.options.length=0;

                }



                function MySubjectDMA0(aMenu){

                    nullOptionsDMA(aMenu)



                    with (aMenu){



                        //Rewrites the text and values

                        options[0]=new Option("G1");



                        options[0].selected=true





                    }

                }
                function MySubjectDMA1(aMenu){

                    nullOptionsDMA(aMenu)


                    with (aMenu){



                        //Rewrites the text and values

                        options[0]=new Option("G2");



                        options[0].selected=true





                    }

                }

                function MySubjectDMA2(aMenu){

                    nullOptionsDMA(aMenu)



                    with (aMenu){



                        //Rewrites the text and values

                        options[0]=new Option("G3");



                        options[0].selected=true



                    }

                }


                /* ####################### goDM() ####################### */



                function goDMA(aMenu){

                    if (aMenu.options.value!="none")

                    {

                        location=aMenu.options[aMenu.selectedIndex].value

                    }



                }



                /* ####################### setUp ####################### */



                function setUpDMA(){

                    with (document.frm_scr_det1) {


                        if (Class.selectedIndex==0){

                            Class.options[0].selected=true

                            menuFilesDMA.options[0].selected=true

                        }



                        if (Class.selectedIndex==1)

                        MySubjectDMA0(menuFilesDMA)

                    if (Class.selectedIndex==2)

                    MySubjectDMA1(menuFilesDMA)

                if (Class.selectedIndex==3)

                MySubjectDMA2(menuFilesDMA)





        }

    }



    /* ####################### changeFiles ####################### */



    function changeFilesDMA(){

        aMenu=document.frm_scr_det1.Class

        aMenu2=document.frm_scr_det1.menuFilesDMA

        with (aMenu){



            switch (selectedIndex) {

                case 0:

                    aMenu2.options.length=0;

                    aMenu2.options[0]=

                        new Option("Pages appear here","none")

                    aMenu2.options[0].selected=true;

                    history.go(0)

                    break

                case 1:

                    MySubjectDMA0(aMenu2)

                    aMenu2.options[0].text="G1"

                    break

                case 2:

                    MySubjectDMA1(aMenu2)

                    aMenu2.options[0].text="G2"

                    break

                case 3:

                    MySubjectDMA2(aMenu2)

                    aMenu2.options[0].text="G3"

                    break

                case 4:

                    MySubjectDMA3(aMenu2)

                    aMenu2.options[0].text="Style Sheet Subjects"

                    break



            }

        }



    }

    //-->

        </script>

        <script language="javascript">

    <!-- 
    // state name
    //new Option("text","value")

    //this code changes menus 







    function nullOptionsDMA(aMenu){

        var tot=aMenu.options.length

        for (i=0;i<tot;i++)

        {

            aMenu.options[i]=null

        }

        aMenu.options.length=0;

    }



    function MySubjectDMA0(aMenu){


        nullOptionsDMA(aMenu)



        with (aMenu){



            //Rewrites the text and values

            options[0]=new Option("G1");



            options[0].selected=true





        }

    }
    function MySubjectDMA1(aMenu){

        nullOptionsDMA(aMenu)


        with (aMenu){



            //Rewrites the text and values


            options[0]=new Option("G2");



            options[0].selected=true





        }

    }

    function MySubjectDMA2(aMenu){

        nullOptionsDMA(aMenu)



        with (aMenu){



            //Rewrites the text and values

            options[0]=new Option("G3");



            options[0].selected=true



        }

    }


    /* ####################### goDM() ####################### */



    function goDMA(aMenu){

        if (aMenu.options.value!="none")

        {

            location=aMenu.options[aMenu.selectedIndex].value

        }



    }



    /* ####################### setUp ####################### */



    function setUpDMA(){

        with (document.frm_scr_det1) {

            if (State.selectedIndex==0){

                State.options[0].selected=true

                menuFilesDMAA.options[0].selected=true

            }



            if (State.selectedIndex==1)

            MySubjectDMA0(menuFilesDMAA)

        if (State.selectedIndex==2)

        MySubjectDMA1(menuFilesDMAA)

    if (State.selectedIndex==3)

    MySubjectDMA2(menuFilesDMAA)





}

}



/* ####################### changeFiles ####################### */



function changeFilesDMAA(){

aMenu=document.frm_scr_det1.State

aMenu2=document.frm_scr_det1.menuFilesDMAA

with (aMenu){



switch (selectedIndex) {

    case 0:

        aMenu2.options.length=0;

        aMenu2.options[0]=

            new Option("Pages appear here","none")

        aMenu2.options[0].selected=true;

        history.go(0)

        break

    case 1:

        MySubjectDMA0(aMenu2)

        aMenu2.options[0].text="AN"

        break

    case 2:

        MySubjectDMA1(aMenu2)

        aMenu2.options[0].text="AP"

        break

    case 3:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="AR"

        break
    case 4:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="AS"

        break
    case 5:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="BR"

        break
    case 6:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="CHD"

        break

    case 7:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="CG"

        break
    case 8:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="DL"

        break
    case 9:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="GA"

        break
    case 10:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="GJ"

        break
    case 11:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="HR"

        break
    case 12:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="HP"

        break
    case 13:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="JK"

        break
    case 14:



        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="JH"

        break
    case 15:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="KA"

        break
    case 16:

        MySubjectDMA2(aMenu2)


        aMenu2.options[0].text="KL"

        break
    case 17:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="LK"

        break

    case 18:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="MP"

        break

    case 19:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="MH"

        break

    case 20:

        MySubjectDMA2(aMenu2)


        aMenu2.options[0].text="MN"

        break

    case 21:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="ML"

        break
    case 22:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="MZ"

        break
    case 23:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="NL"

        break
    case 24:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="OR"

        break
    case 25:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="PY"

        break
    case 26:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="PB"

        break
    case 27:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="RJ"

        break
    case 28:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="SK"

        break
    case 29:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="TN"

        break
    case 30:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="TR"

        break
    case 31:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="UK"


        break
    case 32:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="UP"

        break
    case 33:

        MySubjectDMA2(aMenu2)

        aMenu2.options[0].text="WB"

        break

    case 4:

        MySubjectDMA3(aMenu2)

        aMenu2.options[0].text="Style Sheet Subjects"

        break



}

}



}

//-->