CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Samia Naveed
Samia Naveed

Reputation: 101

How I can set drop down menu when click on check box of parent then open the sub list of parent?

How I can set drop down menu when click on check box of parent then open the sub list of parent?
I want to set drop down menu. When i click on Check-box subject name like Physics then open the sub category of physics otherwise not open. All subject list save in sql database, so i don't put this code:

$('input[name="Physics"]').on('click', function(){$('.physicsTable').slideToggle();})
$('input[name="Chemistry"]').on('click', function(){$('.cheTable').slideToggle();})

So any more idea give me please. Here a some code of example.but i pick the subject name in Sql Database.i put the php in place of subject name Physics.all subject list show use the while loop. I want to set this menu in table form. Any one can help me. Tell me how can set JQuery.

its a example code:

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>

         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>

                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table style="display:none;">
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>

                </tr>




          </table>

its a real code:

<table>
<tr>
        <td valign="top">Disciplines
        <?php echo REQUIRED?></td>
        <td><table>
            <tr>
            <?php $rsED=$db->execute("SELECT Ed_Id, Ed_Name FROM ".TBL_EVENT_Desipiline." Where Ed_Parent=0");
         while($rowED=$db->row($rsED)){?>
              <td width="30"><input id="menu1" type="checkbox" name="<?php echo $rowED["Ed_Name"]?>" /></td>
              <td width="200"><?php echo $rowED["Ed_Name"]?>
              <table class="physicsTable" style=" display:none;">
            <tr>
            <?php $rsSED=$db->execute("SELECT Ed_Id, Ed_Name, Ed_Parent FROM ".TBL_EVENT_Desipiline." WHERE Ed_Parent='".$rowED["Ed_Id"]."'ORDER BY Ed_Id");
         while($rowSED=$db->row($rsSED)){?>
              <td width="30"><input type="checkbox" name="<?php echo $rowSED["Ed_Name"]?>" /></td>
              <td width="200"><?php echo $rowSED["Ed_Name"]?></td>
               </tr><?php  } ?>
          </table>
              </td> 
            </tr><?php  } ?>
          </table>  
          </td>
      </tr>
</table>

Upvotes: 1

Views: 325

Answers (2)

Domain
Domain

Reputation: 11808

Give classes to tables in html

<table >
<tr>
        <td valign="top">Disciplines :</td>
        <td><table>
            <tr>

         <td width="30"><input type="checkbox" name="Physics" /></td>
              <td width="200">Physics
              <table class='physicsTable' >
            <tr>
              <td width="30"><input type="checkbox" name="Acoustics" /></td>
              <td width="200">Acoustics</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Cosmology" /></td>
              <td width="200">Cosmology</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Nuclear Physics" /></td>
              <td width="200">Nuclear Physics</td>
               </tr>
          </table>

                    <td width="30"><input type="checkbox" name="Chemistry" /></td>
              <td width="200">Chemistry
              <table class='cheTable'>
            <tr>
              <td width="30"><input type="checkbox" name="Chromatography" /></td>
              <td width="200">Chromatography</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Catalysis" /></td>
              <td width="200">Catalysis</td>
               </tr>
                  <tr>
              <td width="30"><input type="checkbox" name="Geochemistry" /></td>
              <td width="200">Geochemistry</td>
                    </tr>
          </table>
               </tr>
          </table>
              </td>         
                </tr>   
          </table>

js file

$(document).ready(function(){
   $('.physicsTable').hide();
    $('.cheTable').hide();   
$('input[name="Physics"]').on('click',function(){$('.physicsTable').toggle();})
$('input[name="Chemistry"]').on('click', function(){$('.cheTable').toggle();})
});

You can run and check the code here http://jsfiddle.net/quobc2Lf/1/

Upvotes: 0

Tushar
Tushar

Reputation: 87203

I think this is what you want:

$(':checkbox').on('click', function () {
    $(this).parent('td').next('td').find('table').slideToggle();
});
  1. $(this) : Currently clicked checkbox
  2. parent('td') : parent node
  3. next('td') : Next td element
  4. find('table') : Get the table element inside

Demo: https://jsfiddle.net/tusharj/zedqx1ya/

Upvotes: 1

Related Questions