js用下拉菜单控制表格显示与否

js代码:

 

< script type = " text/javascript " >
function  hide(tb,sl) {
if(document.getElementById(sl).value == "")
document.getElementById(tb).style.display 
= "block";
else
document.getElementById(tb).style.display 
= "none";
}

</ script >

下拉菜单:

 

< select  name ="s_outqua"  onChange ="hide('tb1','s_outqua')" >
            
< option  value ="是" > </ option >
            
< option  value ="否"  selected > </ option >
          
</ select >

表格:

 

< table  width ="100%"  height ="60"   border ="0"  cellpadding ="0"  cellspacing ="0"  id ="tb1"  style ="display:none;" >
            
< tr >
              
< td  width ="5%"  align ="center" > &nbsp; </ td >
              
< td  width ="23%"  height ="30"  align ="center" > 校外住宿地址: </ td >
              
< td  width ="56%"  height ="30" >< input  type ="text"  name ="quaadd" ></ td >
              
< td  width ="16%" > &nbsp; </ td >
            
</ tr >
            
< tr >
              
< td  align ="center" > &nbsp; </ td >
              
< td  height ="30"  align ="center" > 是否经过审批: </ td >
              
< td  height ="30" >< select  name ="s_app" >
                  
< option  value ="是" > </ option >
                  
< option  value ="否"  selected > </ option >
              
</ select ></ td >
              
< td > &nbsp; </ td >
            
</ tr >
          
</ table >

我的代码可以实现多个下拉菜单控制多个不同的表格,网上其他的好像不行

嘿嘿

自吹一下 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现点击下拉菜单显示更多的功能,你可以使用JavaScript来控制元素的显示和隐藏。以下是一个示例代码: ```html <div class="dropdown"> <button class="dropdown-toggle" type="button" data-toggle="dropdown"> 下拉菜单 </button> <ul class="dropdown-menu"> <!-- 这里放一级标题 --> <li><a href="#">标题1</a></li> <li><a href="#">标题2</a></li> <!-- 如果一级标题超过两个,则显示“查看剩余标题” --> <!-- 一级标题超过两个时,隐藏后面的标题 --> <li id="hidden-dropdown" style="display: none;"> <a href="#" class="toggle-rest">查看剩余标题</a> <ul class="rest-dropdown-menu"> <!-- 这里放剩余的一级标题 --> <li><a href="#">标题3</a></li> <li><a href="#">标题4</a></li> <li><a href="#">标题5</a></li> </ul> </li> </ul> </div> <script> // 获取“查看剩余标题”按钮元素 const toggleRestButton = document.querySelector('.toggle-rest'); // 获取隐藏的子菜单元素 const hiddenDropdown = document.getElementById('hidden-dropdown'); // 点击按钮时切换子菜单的显示和隐藏 toggleRestButton.addEventListener('click', function() { if (hiddenDropdown.style.display === 'none') { hiddenDropdown.style.display = 'block'; } else { hiddenDropdown.style.display = 'none'; } }); </script> ``` 在上面的代码中,我们添加了一个按钮来触发显示更多的一级标题。通过JavaScript监听按钮的点击事件,当按钮被点击时,切换隐藏子菜单的显示和隐藏。 你可以根据自己的需求进行样式和功能的调整,这只是一个简单的示例供参考。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值