动态显示隐藏<td>标签或二级菜单_怎么动态显示td-优快云博客

本文介绍了一种前端实现方式，通过select元素的onchange事件触发SelectIsAgency方法，根据不同的选项值动态显示或隐藏特定的HTML元素。当选择直销商户时，隐藏代理商户的相关字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先通过click，onchange等事件进入到我们的方法

我们这里通过一个onchange事件来进入到前台的SelectAgency方法并获取到select标签的value值

<td>
<select id="is_agency " name="is_agency" onchange="SelectIsAgency(this.options[this.selectedIndex].value)">
<option value="0" ${mAgentRelation.isAgency=='0'?"selected='selected'":""}>直销商户</option>
<option value="1" ${mAgentRelation.isAgency=='1'?"selected='selected'":""}>代理商商户</option>

</select>
</td>

将需要动态隐藏或显示的标签id定义

<tr id =agencyMerchant>
<td class="tr" ><font color="red">*</font>所属代理商户名称：</td>
<td> <select id=agency name="agency" onchange="SelectAgency(this.options[this.selectedIndex].value)" >
<option value="${mAgentRelation.agency}">${mAgentRelation.agency}</option>
</select>
</td>

</tr>

然后在方法中通过对之前value的值或所需要条件的进行判断，然后动态显示和隐藏属性

function SelectIsAgency(m){

if(m == 0){
document.getElementById( "agencyMerchant").style.display= "none";
}else{
document.getElementById("agencyMerchant").style.display = "";
}
}