需求:
表格中的会议主题一栏,为一个下拉框,需要实现选择的值为“座谈会”和“常委会”的时候,表格的结尾才会显示出会议说明这一栏。其他情况都默认为隐藏。上一个效果图:
默认隐藏:
选择改变,会议说明出现:
现在就讲解一下我是怎么实现的,作为前端我也是小白,不喜勿喷……
先将这一行默认隐藏,使用该属性隐藏。
display: none;
元素成功隐藏,接下来为会议主题的select元素增加一个Onchange的触发事件:
//html代码
<tr>
<td class="lable_td">会议主题:</td>
<td colspan="3">
<select id="meetname" name="meetname">
<option value="1" selected="selected">办公室会议</option>
<option value="2">常委会</option>
<option value="3">座谈会</option>
</select>
</td>
</tr>
//js代码
document.getElementById("meetname").onchange = function(){
let meetname = this.options[this.selectedIndex].value;
//alert(meetname);
if(meetname==2||meetname==3){
document.getElementById("description_id").style.display = "table-row";
}else{
document.getElementById("description_id").style.display = "none";
}
}
成功!!!!!
注意点:这里的设置显示的display属性要用table-row属性