[英]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: 所有主题列表保存在sql数据库中,因此我不放置以下代码:
$('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. 这里有一些例子的代码。但是我在Sql Database中选择了主题名称。我把php代替了主题名称Physics。所有主题列表显示使用while循环。 I want to set this menu in table form. 我想以表格形式设置此菜单。 Any one can help me. 任何人都可以帮助我。 Tell me how can set JQuery. 告诉我如何设置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>
I think this is what you want: 我认为这是您想要的:
$(':checkbox').on('click', function () {
$(this).parent('td').next('td').find('table').slideToggle();
});
$(this)
: Currently clicked checkbox
$(this)
:当前单击的checkbox
parent('td')
: parent node parent('td')
:父节点 next('td')
: Next td
element next('td')
:下一个td
元素 find('table')
: Get the table
element inside find('table')
:获取table
元素 Demo: https://jsfiddle.net/tusharj/zedqx1ya/ 演示: https : //jsfiddle.net/tusharj/zedqx1ya/
Give classes to tables in html 在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 js文件
$(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/ 您可以在此处运行并检查代码http://jsfiddle.net/quobc2Lf/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.